Question

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

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

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

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

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

Answer 1

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

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

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

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

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

Answer 2

它们可以存在于同一个对象上，认为具有悬停状态的按钮然后是单击操作。但是，click事件只会读取click事件，因为enter事件实际上是在之前发生的。

您可以创建类似mouseIsOver的var，并在输入事件触发时将其设置为true。我可以安全地假设，如果发生点击，鼠标就会超过同一个目标。

Answer 3

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

如果再次查看代码，您会发现它没有意义。怎样才能同时出现X和Y？它不能。

Answer 4

对于第一个问题我认为你得到了答案....

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

你可以使用trigger()函数..

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

如果您想了解更多关于trigger的信息这是链接

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

Answer 5

有了Jquery事件委托，您可以一次绑定多个事件

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

http://jqfundamentals.com/chapter/events

Answer 6

它们可以100％一起存在，这是一个没有很好答案的好问题...当您在移动设备上时，将触发点击鼠标事件...如果您还检测到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事件，因此您可以添加一个touch事件监听器（仅在移动设备上注册），并更改一个变量来阻止mouseenter事件被触发（通常是这样的逻辑）与onclick逻辑冲突）...像这样：

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

然后，您的鼠标输入将需要如下所示：

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

mouseenter和click事件可以一起存在吗？

6 个答案: