使用原生JavaScript进行mouseenter委托？

Question

如何实现mouseenter事件的事件委派？

我正在寻找与此jQuery代码等效的方法，但没能理解jQuery在内部是如何实现的：

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

我看过这个相关问题，但是没有给出合适的解决方案。

我也阅读过Mozilla关于mouseenter和委派的文档，除了说它与任何浏览器都不兼容之外，他们提供的示例会在JS控制台中抛出错误并且不能工作。

我还检查了这个CodePen，但在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中进行操作。

- Alvaro

---

它们可能在加载时不存在。它们可以通过动态添加，但我无法控制何时以及如何添加。 - Alvaro

哦，对了，我忘记那是一件事了。 - Luca Kiebel

我们选择使用mouseover和一个变量来存储最后一个悬停的元素。这样，event.target实际上将包含悬停的元素，您可以检查其类别以查看是否应该执行某些操作。下一次悬停时，您可以检查下一个悬停的元素是否是前一个元素的子元素。 - Shilly

@Shilly 但是你如何获取目标元素呢？每次尝试使用委托时，我总是得到 document。e.target 并没有给我实际的元素。 - Alvaro

@LucaRainone 似乎无法轻松地从 jquasi 中提取我所需的内容。 - Alvaro

Answer 1

你需要在捕获阶段上添加事件监听器，并将true作为第三个参数传递：

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

为了捕捉选择器，您可以进行更加详细的操作。但这是关键。

演示在此处https://codepen.io/anon/pen/Xqaxwd

- Luca Rainone

---

这就是问题所在！我忘记在最后一个参数中加上 true 了！！:D - Alvaro

Answer 2

也许你可以使用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>

- Amr Noman

---

不需要。需要鼠标进入。鼠标可能不会移动 :) - Alvaro

@Alvaro，我认为即使是jQuery也不能像你想的那样工作，请查看此fiddle，将鼠标放在div右侧，当div移动到鼠标上方时，除非你移动鼠标，否则不会发生任何事情。 - Amr Noman

我可以使用触控板的滚轮效果上下滚动而无需移动鼠标，同时警报仍然持续触发。 - Alvaro