踩坑 點選事件出現兩次,事件委託

2022-02-19 03:02:44 字數 808 閱讀 2856

1、html

虎兒歌

虎兒歌

function aaa()
3、效果

可以看到點選後方法執行兩次 ,

測試辦法,檢查事件物件的源觸發

4、html

虎兒歌

虎兒歌

5、js 

var c = document.getelementsbyclassname('name');

for(var i = 0;i6.結果  

可以看到兩次的事件源物件不一樣,

第一次是label第二次是input,點選input本身不會執行兩次,

可以確定當label的for屬性繫結了input的id,,點選label會相當於點選input,即input會變為選中狀態

當吧事件繫結在input時,點選label也會觸發input的點選事件,『

結論:label  繫結了input後點選label相當於點選input,所以在父元素同時有label和input並且繫結時,就會出現兩次

解決:利用事件委託,判斷源觸發物件當為 label時,不執行,或者改變其巢狀關係;

點選label出發兩次點選事件

我把input框寫在label標籤裡面,出發兩次點選事件 label class checked label input type radio name pay type label label click function 原因 在使用者選擇label標籤是,瀏覽器就會自動把焦點轉到和標籤相關的表...

Jquery 事件執行兩次

阻止冒泡的方法並不止 return false 這一種,還有event.stoppropagation 這兩種方法是有區別的,簡單來說 event.stoppropagation 會阻止事件往上冒泡,但是並不阻止事件本身 return false 則是既阻止了事件往上冒泡又阻止了事件本身。修改前 p...

解決jquery click事件執行兩次

mydiv click function e unbind 方法移除被選元素的事件處理程式。該方法能夠移除所有的或被選的事件處理程式,或者當事件發生時終止指定函式的執行。該方法也可以通過 event 物件取消繫結的事件處理程式。該方法也用於對自身內部的事件取消繫結 比如當事件已被觸發一定次數之後,刪...