делегирование мыши, используя vanilla JavaScript? - PullRequest
Новая
       40

делегирование мыши, используя vanilla JavaScript?

0 голосов
/ 04 мая 2018

Как реализовать делегирование события для события mouseenter?

Я ищу эквивалент этого jQuery-кода, но не смог понять, как jQuery делает это внутренне: 

$(document).on('mouseenter', '.demo', foo);

Я видел этот другой вопрос по этому поводу , но не было найдено правильного решения.

Я также прочитал Документы Mozilla, касающиеся mouseenter и делегирования, и кроме того, что он не совместим ни с одним браузером, приведенный пример выдает ошибку на консоли JS и не работает.

Я также проверил этот код , который также не работает в Chrome (не пробовал другие браузеры).

Есть идеи?

Это то, что я пытаюсь до сих пор, но элемент target, кажется, всегда всплывает: 

document.addEventListener('mouseenter', function(e) {
    console.log('==============================');
    console.log(e.currentTarget); //document
    console.log(e.target); //document 
    console.log(e.relatedTarget); //nothing
    console.log(e.handleObj); //nothing
});

Вы можете играть с ним в этом jsfiddle .

Ответы [ 2 ]

0 голосов
/ 04 мая 2018

Вы должны добавить прослушиватель событий на , фиксируя fase , передавая true в качестве третьего аргумента: 

document.body.addEventListener("mouseenter", function(e) {
    if(e.target.className === "demo") {
        console.log("catched");
    }
},true); // capturing phase

Вы можете сделать что-то более сложное, чтобы поймать селектор. Но это ключ.

Демо здесь https://codepen.io/anon/pen/Xqaxwd

0 голосов
/ 04 мая 2018

Может быть, вы можете использовать mousemove и отслеживать текущий элемент (с учетом родителей) следующим образом: 

let lastTarget = null;

document.addEventListener('mousemove', function(e) {
 const target = checkWithParents(e.target);
 if (target && target != lastTarget) {
   alert('mouseenter');
 }
 lastTarget = target;
})

function checkWithParents(el) {
  while (el) {
    if (el && el.classList && el.classList.contains('demo')) {
      return el;
    }
    el = el.parentNode;
  }
  return null;
}
.demo {
  background-color: tomato;
  height: 300px;
  width: 300px;
  margin: 50px;
}
<div class="demo"><div class="inner"></div></div>
<div class="demo"><div class="inner"></div></div>
...