javascript - jQuery .on (“click”)在触摸设备上触发 “mouseover”

在触摸设备上使用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？这不是我期望没有鼠标的设备的行为。这是一个错误吗？我应该使用哪个事件，以便仅在输入实际鼠标指针时才触发“mouseover”？

我的JQuery版本是2.2.4。

最佳答案

我遇到了同样的问题，这就是我为解决该问题所做的事情。

$('#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.
}

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