mouseup模擬drag與click事件衝突

2022-03-07 19:21:22 字數 1176 閱讀 7314

今天要說乙個很隱晦的東西,一般可能很難碰到,碰到了可能很難解決。就是當我們自己用mousestart,mousemove,mouseup做自定義拖拽效果的時候,如果這個時候配上click就會引發乙個拖拽穿透的bug。

mouseup模擬drag與click事件衝突

(***)    

問題分析

其實這種問題一般情況下是很難遇到的,只會有某些框架裡面出現這種bug,那我們看看這種問題到底是如何出現的。

首先自定義拖拽是利用mousestart,mousemove,mouseup三個事件組合形成的,但是mouseup執行之後,click是一定會執行的,是無法避免的,是無法用preventdefault,stoppropagation,stopimmediatepropagation阻止的。本例的demo中就在mouseup之後執行了上述阻止事件傳播的方法,但是並沒有效果。因為mouse事件和click事件本身就不是乙個系列的,因此沒有關係,所以當發生拖拽之後,mouseup一定會執行,click也會在mouseup執行後執行。

解決方案

首先我們可以解決最簡單的一種,就是不拖拽的情況下觸發只是觸發click。

按照剛才的說法,mouseup事件後click必定會觸發,但是如果沒有發生拖拽,也就是沒有觸發mousemove事件,這種情況比較簡單,我們可以用乙個變數紀錄是否觸發mousemove,在mouseup的時候只觸發發生拖拽的情況。

還有一種比較複雜的情況,就是在發生了拖拽的情況下如何避免click的觸發?這個時候我們用乙個定時去控制乙個全域性變數,讓這個變數在200毫秒之後發生改變,因此mouseup之後click很快就觸發了,不到200ms,因此可以保證變數還沒有發生變化,click事件裡面去檢測這個變數,如果是變化之前,那麼不執行。具體**如下:

1

//mouseup事件裡定時改變乙個變數

2 window.mouseup_click_debug = true

;3 settimeout(function

() , 200);6//

click事件裡去檢測這個變數是否發生改變,如果沒改變,說明mouseup剛執行完,這裡不執行7if

(window.mouseup_click_debug)

解決後的demo如下:

解決後demo:mouseup模擬drag與click事件衝突

(***)

**:

C 模擬滑鼠移動與點選

我們需要用到的mouse event函式,位於user32.dll這個庫檔案裡面,所以我們要先宣告引用。system.runtime.interopservices.dllimport user32 private static extern int mouse event int dwflags,...

模擬訊號 模擬訊號與模擬電路

訊號 用來攜帶資訊的物理量。電訊號 隨著時間變化的電壓或電流,在數學上,我們可以通過函式來表達這種變化情況,因此我們可以畫出波形。電子電路中的訊號分類 數碼訊號和模擬訊號。模擬訊號的特點 連續性,無論是在時間上還是在數值上。大多數的物理量均為模擬量,如溫度 壓力 流量.非電的物理量可以通過感測器變換...

C 模擬實現strlen與strcpy

在日常的程式設計學習中,strlen與strcpy一直是我們使用比較頻繁的兩個函式,今天我們就通過模擬實現這兩個函式,來加深對於這兩個函式的理解 首先我們來看一看這兩個函式實現所需要具備的功能 一 strlen 是c標準庫中的字串函式,要在執行時才能計算。引數必須是字元型指標 char 且必須是以 ...