mouseenter和click事件可以同时存在吗？

Question

我想知道 mouseenter 和 click 事件是否可以同时存在，并且在检查时它们都可以存在为 TRUE：

if ((evt.type === 'mouseenter') && (evt.type === 'click'))  

这是因为当我将鼠标悬停在链接上时，mouseenter 会触发（设置为 TRUE），即使我单击它，悬停仍然会显示。也许它们可以共存，但我不是这方面的专家。

如果有人能够提供见解，我将非常感激。

另外，如何在 mouseenter 事件期间触发 click 事件？

Answer 1

mouseenter当鼠标进入控件时触发该事件。单击鼠标时会触发 click 事件。它们是两个单独的事件，调用两个单独的事件处理程序。如果您在鼠标进入元素时单击，它们将在很短的时间内相互调用，但它们仍然是两个不同的事件。

区分事件mouseenter和mouseover事件也很重要。mouseenter当鼠标物理进入元素时触发，而当mouseover鼠标停留在元素上时持续触发。

虽然您本身无法触发单击事件，但您可以调用由单击事件处理程序调用的相同函数。例如，如果你有这个：

var myfunc = function (e) { ... }
document.getElementById("id").onclick = myfunc;

然后直接调用就可以myfunc得到和点击鼠标一样的结果。

Answer 2

它们可以 100% 一起存在，这是一个很好的问题，没有好的答案...当您在移动设备上时，点击时会引发 mouseenter 事件...如果您还检测 onclick 以及 mouseenter ，那么移动设备和台式机之间就会出现差异。

现在解决这么小的问题有点困难。

const x = document.getElementById('some_node')
x.onclick=(e)=>{
  e.stopPropagation()
  // this logic will be triggered on click for both desktop and mobile
}
x.onmouseenter=(e)=>{
  e.stopPropagation()
  // this logic will be triggered on click for mobile only (but will
  //have already been triggered on desktop when cursor entered node)
}

我为此想到的唯一解决方法是使用事件监听器来进行点击/触摸，而且我认为这非常聪明。这些事件触发的顺序/优先级为：触摸 > mouseenter > 单击。

由于首先触发触摸事件，因此您可以添加触摸事件侦听器（仅在移动设备上注册），并更改防止触发 mouseenter 事件的变量（这是通常与触摸事件冲突的逻辑） onclick 逻辑）...像这样：

let isMobile = false
x.addEventListener('touchstart',(e)=>{
  isMobile = true
}, false);

那么你的 mouseenter 需要看起来像这样：

x.onmouseenter=(e)=>{
  e.stopPropagation()
  if(!isMobile){
    // this logic will no longer cause a conflict between desktop and mobile
  }
}