jQuery中如何完美解決Chrome下的mousemove事件bug?
在Chrome下有一個關於mousemove的bug是:
1.在觸發mouseup事件時,包括在觸發click和contextmenu時,也會觸發mousemove事件;
2.更詭異的是,當你連續的觸發contextmenu事件時,mousedown事件會被mousemove代替,
目前我想到的一個解決方案,透過時間戳比較:
var body = document.querySelector("h1"); var timeStamp; body.addEventListener("mousedown", function (e) { console.log("mouse down"); }, false); body.addEventListener("mouseup", function (e) { console.log("mouse up"); timeStamp = e.timeStamp; }) body.addEventListener("mousemove", function (e) { if (!timeStamp || ( e.timeStamp - timeStamp > 10)) { console.log("mouse move"); } })
這樣能避免在觸發click事件,或者觸發滑鼠左鍵mouseup引起的mousemove,但是對於上面描述的contextmenu引起的mousemove還是不能很好解決
請問有什麼完美的解決辦法嗎?還是只能盡量避免這種情況
<input type="text" id="a1" /> $("#a1").mousemove(function(){ if ($(this).data("x") === event.pageX && $(this).data("y") === event.pageY) { return false; } $(this).data({"x":event.pageX, "y":event.pageY}); $(this).after("1"); })
用jq是為了在所有瀏覽器下用.data()。思路就是這麼個思路,你自己去改吧。
還有,一個元素綁定mousemove之後就別再綁定別的事件。
最後:盡量別用mousemove,太費資源。
可以透過比較mousedown的位置來確認是否是move運算
document.onmousemove = function(e) { // 不是move操作 if (x === mouseDown.x && y === mouseDown.y) { return false; }}; document.onmousedown = function (e) { mouseDown = { x: e.clientX, y: e.clientY };};
以上是jQuery中如何完美解決Chrome下的mousemove事件bug?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

Win11系統無法安裝中文語言包的解決方法隨著Windows11系統的推出,許多用戶開始升級他們的作業系統以體驗新的功能和介面。然而,一些用戶在升級後發現他們無法安裝中文語言包,這給他們的使用體驗帶來了困擾。在本文中,我們將探討Win11系統無法安裝中文語言套件的原因,並提供一些解決方法,幫助使用者解決這個問題。原因分析首先,讓我們來分析一下Win11系統無法

你在Windows上運行的每個應用程式都有一個元件程式來更新它。因此,如果你使用的是谷歌Chrome或谷歌地球,它會運行一個GoogleUpdate.exe應用程序,檢查是否有更新可用,然後根據設定進行更新。然而,如果您不再看到它,而是在Windows11/10的任務管理器中看到一個進程updater.exe,這是有原因的。什麼是Updater.exe在Windows11/10?谷歌已經為其所有應用程式推出了更新,如GoogleEarth、GoogleDrive、Chrome等。這次更新帶來了

隨著智慧型手機技術的不斷發展,手機在我們日常生活中扮演著越來越重要的角色。而作為一款專注於遊戲效能的旗艦手機,黑鯊手機備受玩家青睞。然而,有時候我們也會面臨到黑鯊手機開不了機的情況,這時候我們就需要採取一些措施來解決這個問題。接下來,就讓我們來分享五招教你解決黑鯊手機開不了機的問題:第一招:檢查電池電量首先,確保你的黑鯊手機有足夠的電量。可能是因為手機電量耗盡

隨著社群媒體的不斷發展,小紅書已經成為越來越多年輕人分享生活、發現美好事物的平台。許多用戶在發布圖片時遇到了自動儲存的問題,這讓他們感到十分困擾。那麼,如何解決這個問題呢?一、小紅書發布自動儲存圖片怎麼解決? 1.清除快取首先,我們可以嘗試清除小紅書的快取資料。步驟如下:(1)開啟小紅書,點選右下角的「我的」按鈕;(2)在個人中心頁面,找到「設定」並點選;(3)向下捲動,找到「清除快取」選項,點擊確認。清除快取後,重新進入小紅書,嘗試發布圖片看是否解決了自動儲存的問題。 2.更新小紅書版本確保你的小

大家都知道,如果電腦無法載入驅動程序,該設備可能就無法正常工作或與電腦進行正確的互動。那在電腦上彈出無法在此裝置上載入驅動程式的提示框,我們要如何解決呢?下面小編就教大家兩招輕鬆解決問題。 無法在此裝置上載入驅動程式解決方法 1、開始功能表搜尋「核心隔離」。 2、將記憶體完整性關閉,上方提示「記憶體完整性已關閉。你的裝置可能易受攻擊。」點擊後方忽略即可,不會對使用有影響。 3.重啟機器之後即可解決問題。

標題:分析Oracle錯誤3114:原因及解決方法在使用Oracle資料庫時,常常會遇到各種錯誤代碼,其中錯誤3114是比較常見的一個。此錯誤一般涉及資料庫連結的問題,可能導致存取資料庫時出現異常狀況。本文將對Oracle錯誤3114進行解讀,探討其造成的原因,並給出解決該錯誤的具體方法以及相關的程式碼範例。 1.錯誤3114的定義Oracle錯誤3114通

Chrome的插件擴充功能安裝目錄是什麼?正常情況下,Chrome外掛程式擴充功能的預設安裝目錄如下:1、windowsxp中chrome外掛程式預設安裝目錄位置:C:\DocumentsandSettings\使用者名稱\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2、windows7中chrome插件預設安裝目錄位置:C:\Users\使用者名稱\AppData\Local\Google\Chrome\User

WordPress後台亂碼煩惱?試試這些解決方案,需要具體程式碼範例隨著WordPress在網站建置中的廣泛應用,許多用戶可能會遇到WordPress後台亂碼的問題。這種問題會導致後台管理介面顯示亂碼,對使用者的使用帶來極大困擾。本文將介紹一些常見的解決方案,幫助使用者解決WordPress後台亂碼的煩惱。修改wp-config.php檔案開啟wp-config.
