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

Question

我想知道mouseenter和click事件是否可以同时存在，并且当使用以下代码进行检查时，它们都可以设置为TRUE：

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

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

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

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

- Emerson Maningo

---

怎么可能点击而不悬停？我不明白你想做什么。你能发一个示例吗？ - elclanrs

@elclanrs - 按下 Tab 键以聚焦到按钮，然后按 Enter 键。在移动设备上，悬停事件不会被触发。 - Derek 朕會功夫

当然可以，有什么问题呢？那为什么不在mouseenter和click事件上都触发一个函数，并设置一个标志来进行判断呢？ - elclanrs

当且仅当mousedown和mouseup都来自同一targetElement时，才会注册“Click”事件。因此，您的问题似乎更像是任何XY问题。 - Roko C. Buljan

Answer 1

mouseenter事件在鼠标进入控件时触发，而点击事件则在鼠标被点击时触发。它们是两个不同的事件，需要分别调用两个事件处理程序。如果您在鼠标进入元素时恰好点击，它们将在短时间内相互调用，但它们仍然是两个不同的事件。

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

虽然您无法直接触发点击事件，但可以调用与点击事件处理程序相同的函数。例如，如果您有以下内容：

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

那么你可以直接调用myfunc，就能得到与鼠标点击相同的结果。

- Levi Botelho

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>click。

由于触摸事件首先被触发，您可以添加一个触摸事件监听器（它只会在移动设备上注册），并更改防止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
  }
}

- Applebees

---

它们可以通过不同设备上的相同操作触发，但不能同时触发，因此更好的检查方法是使用“或”而不是“和”=> if ((evt.type === 'mouseenter') || (evt.type === 'click')) - Osama_Almaani

在移动设备上，它们可以被同时触发，因为智能手机上没有光标。当您在移动设备上轻触屏幕时，它几乎会立即触发mouseenter和click事件。实际上，mouseenter事件比click事件先触发几分之一秒（我说的是针对同一节点的两个独立事件侦听器）。每个事件触发之间的时间差非常小，以至于两个事件侦听器之间几乎总会有交互。在逻辑之间设置超时是一种解决方案。 - Applebees

@Osama_Almaani 或者更健壮的解决方案是添加一个触摸事件监听器，以便在移动设备上检测到鼠标进入之前的轻触，并使用它来防止执行鼠标进入中的逻辑。 （我在我的帖子中添加了一个示例） - Applebees

Answer 3

使用Jquery事件委托，您可以一次绑定多个事件

$('#IdElement').on('mouseenter click', function () {
    //Your Code
});

http://jqfundamentals.com/chapter/events

- Daniel Barreto

Answer 4

它们可以存在于同一个对象上，比如一个带有悬停状态和点击动作的按钮。然而，点击事件只会读取点击事件，因为输入事件实际上是先发生的。

您可以创建一个变量，例如mouseIsOver，并在输入事件触发时将其设置为true。但可以安全地假设，如果发生了点击，则鼠标仍在相同的目标上方。

- Patrick Gunderson

Answer 5

两个事件可能同时发生，但它们仍然会一个接一个地被处理。因此，您发布的if永远不会评估为true。

如果您再次查看代码，您会发现它没有意义。某物如何可以同时是X和Y？不可能的。

- Jan Hančič

---

谢谢Jan，出于好奇心我尝试过将它们分离和评估，但似乎click事件永远不会被触发：if ((evt.type === 'mouseenter') {//鼠标滑过事件为真}if ((evt.type === 'click') {//点击事件为真 } - Emerson Maningo

Answer 6

关于第一个问题，我认为你已经得到了答案...

然而，对于如何在mouseenter事件期间触发click事件？

你可以使用trigger()函数。

http://jsfiddle.net/PDhBW/2/

如果您想了解更多关于 触发器 的内容，这里是链接

http://api.jquery.com/trigger/

- bipen

---

谢谢，但我希望我的用户仍然可以点击链接而不是在悬停时触发单击事件。 - Emerson Maningo

困惑了..但是为什么不只使用 click() 呢？因为 mouseenter 事件总是在 click 事件之前被调用？？你在鼠标悬停时还需要做些什么吗？ - bipen

抱歉造成困惑，我遇到了这个问题：当我将鼠标悬停在图像链接上时，它会显示悬停效果（由mouseenter事件触发）。但是当我单击它时（悬停效果仍然显示），它不会触发点击事件。我尝试按照fiddle中所示的添加触发代码，但当我将鼠标悬停在上面时，它会立即触发点击事件。我需要mouseenter事件来显示悬停效果。 - Emerson Maningo

是的，自从 mouseenter click 被触发以来。请查看这个 fiddle(console)... http://jsfiddle.net/PDhBW/3/ 一个简单的调用这两个函数都可以工作..你能创建一个你的情况的 fiddle 吗？ - bipen