5

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

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

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

如果有人可以提供见解，我将不胜感激。

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

4

6 回答 6

4

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

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

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

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

然后你可以简单地myfunc直接调用，你会得到与单击鼠标相同的结果。

于 2012-12-20T07:10:40.453 回答
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)
}

我为此提出的唯一解决方法，我认为它非常聪明，是使用事件监听器进行点击/触摸。触发这些事件的顺序/优先级为：touch > 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
  }
}
于 2020-11-28T22:44:58.660 回答
0

对于第一个问题，我想你得到了答案......

但是，对于也如何在 mouseenter 事件期间触发单击事件？

你可以使用trigger()功能..

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

如果你想阅读更多关于trigger 这里的链接

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

于 2012-12-20T07:18:20.540 回答
0

它们可以存在于同一个对象上，例如一个具有悬停状态的按钮，然后是一个单击动作。click 事件，虽然只会读取 click 事件，因为 enter 事件实际上发生得更早。

您可以创建一个类似的 var，mouseIsOver并在 enter 事件触发时将其设置为 true。我可以放心地假设，尽管如果发生点击，鼠标会在同一个目标上。

于 2012-12-20T07:10:11.600 回答
0

这两个事件可能同时发生，但它们仍将在另一个之后处理。因此，if您发布的内容将永远不会评估为true.

如果您再次查看您的代码，您会发现它没有意义。一个东西怎么可能同时是 X 和 Y？它不能。

于 2012-12-20T07:10:19.900 回答
0

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

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

http://jqfundamentals.com/chapter/events

于 2020-04-03T16:07:36.050 回答