Aquí hay solo una muestra, creo que he hecho todo con o sin función de flecha, pero todavía no obtuve nada. Por lo tanto, necesito agregar al método event.altKey, pero ¿cómo puedo pasar 'e' a eso como solemos hacer sin tener clase?

Aquí HTML

<!doctype html>
<html>
<head>
        <meta charset="utf-8">
        <head>
  <meta charset="utf-8">
  <style>
    .selected {
      background: #0f0;
    }

    li {
      cursor: pointer;
    }
  </style>
</head>
</head>
        <body>

  Кликни на элемент списка, чтобы выделить его.
  <br>

  <ul id="ul">
    <li>Кристофер Робин</li>
    <li>Винни Пух</li>
    <li>Тигра</li>
    <li>Кенга</li>
    <li>Кролик. Просто Кролик.</li>
  </ul>
        <script src="script.js"></script>
        </body>
</html>

Lo que creo que debería funcionar, pero no funciona, aquí está JS

window.addEventListener('load', function(){
    class List{
            constructor(){
                    this.lists = document.querySelectorAll('li');

                    this.lists.forEach((list) => {
                            list.addEventListener('click', (event) => this.click_green);
                            list.addEventListener('onmousedown', (event) => this.no_select_text);
                    });
            }       

            no_select_text(event){
                    event.preventDefault;
                    return false;
            }

            click_green(event){
                    if (event.ctrlKey || event.metaKey)
                    {
                            this.classList.add('selected');
                            return;
                    }
                    let allLists = this.parentNode.querySelectorAll('li');
                    allLists.forEach(function(list){
                            list.classList.remove('selected');
                    });
                    this.classList.add('selected');
            }
    }
    new List;

});

1
Eldar Tailov 1 may. 2020 a las 11:56

2 respuestas

La primera tarea fue hacer que se ejecutara el código. La segunda tarea será proporcionar una explicación de lo que realmente sucede y por qué no se necesita un enfoque que se ejecute con un JavaScript class.

class ListItems{
  constructor(listItemQuery) {
    const listItems = this;

    listItemQuery.forEach((listItem) => {
      listItem.addEventListener('click', listItems.clickGreen, false);
      listItem.addEventListener('onmousedown', listItems.noSelectText, false);
    });
  }
  noSelectText(evt) {
    evt.preventDefault;
    return false;
  }

  clickGreen(evt) {
    const listItem = evt.currentTarget;

    if (evt.ctrlKey || evt.metaKey) {
      listItem.classList.add('selected');
      return;
    }
    const firstLevelListItems = Array.from(listItem.parentNode.children);

    firstLevelListItems.forEach(function(item) {
      item.classList.remove('selected');
    });
    listItem.classList.add('selected');
  }
}

function initializeListItems() {
  new ListItems(document.querySelectorAll('li'));
}
window.addEventListener('load', initializeListItems, false);
.as-console-wrapper { max-height: 100%!important; top: 0; }
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      .selected {
        background: #0f0;
      }
      li {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    Кликни на элемент списка, чтобы выделить его.
    <br/>
    <ul id="ul">
      <li>Кристофер Робин</li>
      <li>Винни Пух</li>
      <li>Тигра</li>
      <li>Кенга</li>
      <li>Кролик. Просто Кролик.</li>
    </ul>
  </body>
</html>
0
Peter Seliger 1 may. 2020 a las 11:46

Solución a tu problema

window.addEventListener('load', function () {
  class List {
    constructor() {
      this.lists = document.querySelectorAll('li');

      this.lists.forEach((list) => {
        list.addEventListener('click', (event) => {
          this.click_green(event)
        });
        list.addEventListener('onmousedown', (event) => {
          this.no_select_text
        });
      });
    }

    no_select_text(event) {
      event.preventDefault;
      return false;
    }

    click_green(event) {
      if (event.ctrlKey || event.metaKey) {
        event.target.classList.add('selected');
        return;
      }
      let allLists = event.target.parentNode.querySelectorAll('li');
      allLists.forEach(function (list) {
        list.classList.remove('selected');
      });
      event.target.classList.add('selected');
    }
  }
  new List;
});
0
Aman 1 may. 2020 a las 11:32