如何防止移動瀏覽器中的模擬鼠標事件？

移動瀏覽器模擬鼠標事件以支持僅將處理程序附加到鼠標事件的網站。但是，如果要實現兩種交互模型（一種用於鼠標事件，另一種用於觸摸事件），那麼阻止瀏覽器模擬鼠標事件會很有幫助。如何防止移動瀏覽器中的模擬鼠標事件？

在iOS Safari瀏覽器，這是相當簡單 - 只需touchend運行的preventDefault：

jQuery(document).on('touchend', function(e) { 
    // Do some logic  
    e.preventDefault(); 
});

這是相當明智的。不幸的是，Android的默認瀏覽器和Dolfin都不使用這種技術取消鼠標模擬。（當defDefault在touchstart上運行時，Dolfin將取消mousedown - 但這不是很有幫助，因爲您不知道手指在touchstart上會採取什麼動作。）

有沒有其他方式有條件地，或者甚至沒有條件，防止模擬鼠標事件發射？

[編輯]

爲了開始理解這個問題（S）好，我在開始的觸摸事件兼容性表：http://labs.cruncher.ch/touch-events-compatibility-table/

來源

2012-03-11 stephband

此外，來自移動Chrome或FF的經驗評論非常感謝。 – stephband 2012-03-11 17:09:59

在附加鼠標事件之前，您能否檢測到它是否爲移動瀏覽器？ – 2012-03-11 17:12:02

@JaredFarrish移動瀏覽器檢測的方法絕不是100％準確的。 – 2012-03-11 17:14:20

雖然有一些狡猾的方式來實現這一點，還有，我用它來解決這個矛盾兩種常見的做法：

1）使用標誌

在你的事件處理程序設置布爾標誌，如mouseIsDown或mouseIsMoving，可以設置和檢查鼠標和觸摸事件。如果用戶單擊鼠標，將其作爲鼠標事件接受。然後，如果觸摸事件隨之發生，請忽略它。

2）僅實現什麼必要

好了，這是很好的做法反正。如果您不需要，請不要打擾添加touchmove和mousemove事件。這將使維護代碼變得更加困難。編輯：可能應該更具體：如果您需要更高級的事件跟蹤，請考慮重新考慮您的用戶界面。

最後，不要依賴外部硬件配置列表，因爲這些列表很少「完全」精確。

來源

2012-03-11 17:21:59

你的第一個建議基本上是'$（document.body）。mousemove（）'，它會設置一個全局標誌，然後被刪除，並且這將在每個'mouse-'事件中用於檢測鼠標的存在？ – 2012-03-11 17:36:13

1）模擬事件的問題是觸摸事件先觸發，然後是鼠標事件 - 所以當鼠標事件發生時，觸摸事件已經完成。其次，像這樣存儲狀態在處理多個觸摸時會變得非常多（取決於你在做什麼）。我儘量不要存儲狀態。第三，我想處理已經編寫的使用鼠標事件的代碼 - 我不想進入所有這些處理程序，並插入有條件地詢問我們是否在觸摸界面中的代碼。不過，我很欣賞你的回答！ – stephband 2012-03-11 17:36:48

另外，我認爲你的第二個不是另一種方法，這只是一個好習慣。你真正的答案是第一個，第二個是提醒你仔細考慮你真正需要什麼（總是很好的建議）。 – 2012-03-11 17:37:28

如何防止移動瀏覽器中的模擬鼠標事件？

回答

相關問題