首頁 web前端 js教程 jQuery中如何完美解決Chrome下的mousemove事件bug?

jQuery中如何完美解決Chrome下的mousemove事件bug?

Jun 28, 2017 am 10:41 AM
chrome jquery 解決

在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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

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

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

熱門話題

Java教學
1659
14
CakePHP 教程
1416
52
Laravel 教程
1310
25
PHP教程
1258
29
C# 教程
1232
24
Win11系統無法安裝中文語言套件的解決方法 Win11系統無法安裝中文語言套件的解決方法 Mar 09, 2024 am 09:48 AM

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

什麼是Updater.exe在Windows 11/10?這是Chrome進程嗎? 什麼是Updater.exe在Windows 11/10?這是Chrome進程嗎? Mar 21, 2024 pm 05:36 PM

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

五招教你解決黑鯊手機開不了機的問題! 五招教你解決黑鯊手機開不了機的問題! Mar 24, 2024 pm 12:27 PM

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

小紅書發布自動儲存圖片怎麼解決?發布自動保存圖片在哪裡? 小紅書發布自動儲存圖片怎麼解決?發布自動保存圖片在哪裡? Mar 22, 2024 am 08:06 AM

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

無法在此裝置上載入驅動程式怎麼解決? (親測有效) 無法在此裝置上載入驅動程式怎麼解決? (親測有效) Mar 14, 2024 pm 09:00 PM

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

解讀Oracle錯誤3114:原因及解決方法 解讀Oracle錯誤3114:原因及解決方法 Mar 08, 2024 pm 03:42 PM

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

Chrome的插件擴充功能安裝目錄是什麼 Chrome的插件擴充功能安裝目錄是什麼 Mar 08, 2024 am 08:55 AM

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後台亂碼煩惱?試試這些解決方案 Mar 05, 2024 pm 09:27 PM

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

See all articles