javascript - JQuery .on ("click") 在触摸设备上触发 "mouseover"

Question

在触摸设备上使用 JQuery 的 $.on("click", function(){}); 时，我遇到了不需要的行为。这是我的代码:

代码:

$(".team").on("mouseover", teamMouseOver);
$(".team").on("mouseout", teamMouseOut);
$(".team").on("click", teamThumbClicked);

function teamMouseOver(event){
    console.log(event.type);
}

function teamMouseOut(event){
    // Do something
}

function teamThumbClicked(event){
    console.log("Clicked!");
}

问题:

使用上面的代码，点击触摸设备上的 .team 元素会同时触发两个监听器，给我以下控制台日志:

mouseover
Clicked!

问题 为什么 mouseover 在触摸设备上被触发？这不是我期望的没有鼠标的设备的行为。这是一个错误吗？我应该使用什么事件才能让“鼠标悬停”仅在实际鼠标指针进入时触发？

我的 JQuery 版本是 2.2.4。

Answer 1

我刚遇到同样的问题，这就是我解决问题的方法。

$('#myEl').on('click', myElClickEvent);

$('#myEl').on('mouseenter', myElMouseEnterEvent);

function myElClickEvent (event) {
   $(this).addClass('Clicked');
}

function myElMouseEnterEvent() {
    // Turn off events
    $('#myEl').off();

    // After 100 milliseconds cut on events, notice click event won't trigger
    setTimeout(function() {
       // .off() is used to prevent from adding multiple click events if the user hovers multiple elements too quickly.
       $('#myEl').off().on('click', myElClickEvent);             
       $('#myEl').off().on('mouseenter', myElMouseEnterEvent);
    }, 100);


   // Do some mouseenter stuff, whatever the reqs. are.
}

这就是我所做的，并且对我的用例来说效果很好。希望这对将来的人有帮助。这个想法是关闭鼠标输入事件中的点击事件，然后在 100 毫秒后将鼠标点击事件重新打开。这将防止这两个事件在触​​摸时触发。