JQuery .on（「click」）在觸摸設備上觸發「mouseover」

在觸摸設備上使用JQuery的$.on("click", function(){});時，我遇到了不想要的行爲。這是我下面的代碼：JQuery .on（「click」）在觸摸設備上觸發「mouseover」

代碼：

$(".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。

來源

2016-05-24 Marquizzo

** [這可能會有幫助]（http://stackoverflow.com/a/12187105/2065039）** –

這是正確的行爲。你想達到什麼目的？我剛剛遇到了同樣的問題（在移動設備上點擊不需要的類），並能夠使用CSS特性解決問題：https：//developer.mozilla.org/en-US/docs/Web/CSS/Specificity – Mussser

我在'mouseover'上顯示工具提示，並將其隱藏在'click'上。如果這兩個事件同時觸發，則工具提示將保持可見狀態，因爲您點擊時應該隱藏它。這就是爲什麼當設備沒有鼠標時我不需要'mouseover'觸發。我認爲這就是觸摸事件的目的。 JQuery是否有意模仿：懸停效果？ – Marquizzo

我剛剛遇到同樣的問題，這是我所做的解決問題。

$('#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毫秒後重新打開鼠標點擊事件。這將防止這兩個事件觸發觸發。

來源

2018-01-11 14:35:31 Grim

JQuery .on（「click」）在觸摸設備上觸發「mouseover」

回答

相關問題