Делегирование событий Javascript, обработка родителей нажатых элементов? - PullRequest
Новая
       22

Делегирование событий Javascript, обработка родителей нажатых элементов?

15 голосов
/ 28 марта 2012

http://jsfiddle.net/walkerneo/QqkkA/

Я видел здесь много вопросов, которые либо задавали вопросы, либо отвечали на вопросы делегирования событий в javascript, но мне еще предстоит увидеть, как использовать делегирование событий для элементов, которые не будут являться целью событие клика.

Например:

HTML: 

<ul>
    <li><div class="d"></div></li>
    <li><div class="d"></div></li>
    <li><div class="d"></div></li>
    <li><div class="d"></div></li>
    <li><div class="d"></div></li>
    <li><div class="d"></div></li>
</ul>​

CSS: 

ul{
    padding:20px;
}
li{
    margin-left:30px;
    margin-bottom:10px;
    border:1px solid black;

}
.d{
    padding:10px;
    background:gray;
}
​

Что, если я хочу добавить событие щелчка для обработки элементов li при их нажатии? Если я присоединяю обработчик события к элементу ul, div s всегда будет целевым элементом. Как проверить это, кроме проверки каждого родителя целевого элемента в функции щелчка?

редактировать:

Я хочу использовать делегирование событий вместо: 

var lis = document.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
    lis[i].onclick = function(){};
}

Но если я сделаю: 

document.getElementsByTagName('ul')[0].addEventListener('click',function(e){

    // e.target is going to be the div, not the li
    if(e.target.tagName=='LI'){

    } 
},false);

EDIT: Меня не интересует, как использовать библиотеки Javascript для этого , мне интересно, как они это делают и как это можно сделать с чистым js.

Ответы [ 2 ]

15 голосов
/ 29 марта 2012

Вот один из способов ее решения: 

var list = document.getElementsByTagName('ul')[0]

list.addEventListener('click', function(e){
  var el = e.target
  // walk up the tree until we find a LI item
  while (el && el.tagName !== 'LI') {
     el = el.parentNode
  }
  console.log('item clicked', el)
}, false)

Это чрезмерно упрощено, цикл будет продолжаться вверх по дереву даже после элемента UL. См. Реализацию в Rye / events для более полного примера.

Методы Element.matches, Node.contains и Node.compareDocumentPosition могут помочь вам реализовать функции этого типа.

1 голос
/ 16 мая 2017

Теперь для элементов есть метод с именем closest, который делает именно это.Он принимает селектор CSS в качестве параметра и находит ближайшего подходящего предка, которым может быть сам элемент.Все текущие версии настольных браузеров поддерживают , но в целом не готовы к использованию.На странице MDN, указанной выше, содержится полифилл.

...