如何将事件传递到js类的方法中,谢谢)

问题描述 投票:1回答:1

这里仅是一个示例,我认为我已经完成了带有或不带有箭头功能的功能,但仍然一无所获。因此,我需要在方法event.altKey中添加内容,但是如何像通常那样在没有类的情况下将'e'传递给它。

这里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>

我认为这应该可以,但是没有用,这是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;

});

javascript class oop arrow-functions
1个回答
0
投票

解决您的问题

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;
});
© www.soinside.com 2019 - 2024. All rights reserved.