jQ的select事件和trigger方法的小衝突

2022-02-09 04:12:43 字數 2362 閱讀 8850

方法和事件都不難理解,分開用也都沒問題,但是一起用就有些小問題出現。

直接上結論:使用trigger方法觸發乙個文字型別的 input 元素的select事件時,chrome瀏覽器會錯誤的觸發三次,firefox和ie11只會正常觸發一次

解決辦法也簡單,把trigger換成triggerhandler()即可。

網上搜了下,有說是trigger()的方法的問題,有說是冒泡問題的,有說是select觸發機制的問題。

然而這些並沒有說服我,填補不了好奇心,所以找不到答案就自己嘗試

啟用 input 域的 select 事件

這是**,點選按鈕,會在頁面新增   文字被選中!的提示,但是會出現三次!!!

問題是在查api時在w3school時發現的,trigger可以觸發的事件那麼多,前輩們故意選擇會出錯的select是為了提醒我們小心麼0.0

給個鏈結,好奇的自己去試試

首先發現時,第一反應是是不是jquery給元素的捕獲階段、目標階段、冒泡階段分別繫結了事件。

檢視trigger說明,它會觸發所有匹配元素的指定事件。所以就換成了triggerhandler();然後果然只觸發一次了。

好開心有沒有,解決問題了有沒有。然而我就是那麼閒的蛋疼

忍不住想,jq那麼出名流行的庫,沒理由繫結事件繫結的那麼奇葩啊,捕獲目標冒泡全繫結,多層事件觸發要怎麼搞?乙個乙個的阻斷事件?不可能啊。

所以又換回trigger,把input的select事件換成click。然後果然也只會觸發一次。

mouseover也一樣,這樣就確定了是select的問題,不是trigger的問題

然後好奇是否是選擇機制的問題,把文字內容刪至一字母----還是三次;刪完文字內容---兩次,看起來似乎和select的選中有些關係,但是這和他們說的觸發機制完全不同。

再試試事件問題。注釋了jq的select事件繫結,用dom2事件繫結了乙個事件,當然,要給input乙個id方便獲取

document.getelementbyid("firstname").addeventlistener('select', function

() ,

false);

然後一執行一點選奇蹟就出現了

完全超出預期啊有沒有

乾脆就把捕獲和目標階段分別用dom2級dom0級給繫結了,為了方便檢視事件觸發順序,把捕獲目標冒泡列印內容分別為1  2  3.

document.getelementbyid("firstname").addeventlistener('select', function

() ,

true

);document.getelementbyid("firstname").onselect=function

()document.getelementbyid("firstname").addeventlistener('select', function

() ,

false);

這次的結果是

事件是繫結了三個,trigger卻觸發了7次事件,由此可以證明,jq沒有分別繫結捕獲目標冒泡,不然就是觸發7次了。

那問題出在**呢,仔細觀察目標階段被觸發了三次!

而且多次試驗以後發現,無論有無其他兩個階段的事件,無論三事件繫結順序,目標階段事件必然在最開始、最後、最中間,一共出現三次(冒泡和捕獲若有,則遵循繫結先後順序觸發各兩次)

刪除文字以後目標階段觸發兩次,到此select事件觸發多次的真正原因終於找到了。

處於某種原因trigger方法觸發select事件,會把select的目標階段事件重複觸發三次,而且捕獲階段和冒泡階段的也會分別觸發兩次。

那這個原因究竟是什麼呢,為了弄明白,又在ie11和firefox上測試,發現兩個瀏覽器是正常的一次。

用firefox 檢視控制台,多次實驗,發現三階段均只會觸發一次,且無論三事件繫結順序,目標階段事件必然在最開始觸發,冒泡和捕獲按照繫結順序觸發。

由於firefox和ie顯示正常,chrome異常,所以我猜測,應該要麼,chrome對於trigger方法觸發select事件的處理比較提別;要麼是jq對trigger方法觸發select事件的內部處理有問題,而firefox和ie做了額外的優化。個人更傾向與前者。

不過暫時沒有技術能力和時間成本再更深入的研究。寫個部落格,也算是留個坑,以後研究了再補吧0.0

jq父級繫結事件的意義 事件委託和JQ事件繫結總結

事件委託 比喻 事件委託的事例在現實當中比比皆是。比如,有三個同事預計會在周一收到快遞。為簽收快遞,有兩種辦法 一是三個人在公司門口等快遞 二是委託給前台mm代為簽收。現實當中,我們大都採用委託的方案 公司也不會容忍那麼多員工站在門口就為了等快遞 前台mm收到快遞後,她會判斷收件人是誰,然後按照收件...

JQ的事件處理

1 on eventtype事件名稱 selector data handler事件處理函式 如果 沒有引數就傳null或者不寫 例子 ul on click function 2 event.stoppropagation 阻止冒泡 preventdefault return false 3 一次...

jq的合成事件

jq中有兩個合成事件 hover 和toggle 1.hover hover方法用於模擬游標懸停事件。當游標移動到元素上時,會觸發指定的第乙個函式 enter 當游標移出這個元素時,會觸發指定的第二個函式 le e 是mouseenter和mousele e的合成 2.toggle toggle 方...