js 事件的冒泡和委託

listwebit發表於2015-07-28
JS事件

簡單說下事件委託與阻止冒泡

html:


1
2
3
4
5
6
7
8
9
10
<ulclass="clearfix"data-type="cityPick">
<liclass="active_sort_opts"data-id="0">全部</li>
<lidata-id="88">紐約</li>
<lidata-id="119">洛杉磯</li>
<lidata-id="138">拉斯維加斯</li>
<lidata-id="84">夏威夷</li>
<lidata-id="120">舊金山</li>
<lidata-id="105">奧蘭多</li>
<lidata-id="118">西雅圖</li>
</ul>

js:


1
2
3
4
5
6
$("ul[data-type='cityPick']").on('click',function(){
alert("父元素ul被點選");
});
$("ul[data-type='cityPick']").on('click','li',function(){
alert("子元素li被點選");
});

當點選具體的li元素時，發現ul的事件也被觸發了，這是我們不想看到的。

解決：


1
2
3
4
5
6
7
$("ul[data-type='cityPick']").on('click',function(){
alert("父元素ul被點選");
});
$("ul[data-type='cityPick']").on('click','li',function(e){
e.stopPropagation();//阻止冒泡
alert("子元素li被點選");
});

加一句阻止冒泡即可。


delegateTarget屬性用於返回負責繫結當前被呼叫的事件處理函式的DOM元素。

delegateTarget屬性最常用於事件函式delegate()、 on()新增的委託事件中，用於返回受委託的DOM元素。

對於bind()、 live()、 click()等"非委託"事件函式而言，該屬性的返回值等於currentTarget屬性的值，也就是返回事件冒泡階段中的當前DOM元素。

該屬性屬於jQuery的Event物件(例項)。

語法

jQuery 1.7 新增該屬性。

eventObject.delegateTarget

返回值

delegateTarget屬性的返回值是Element型別，返回"受委託"繫結當前事件處理函式的的DOM元素。

示例&說明

// 為id為element的元素中的所有span元素繫結click事件
$("#element").on( "click", "span", function(event){
    // event.delegateTarget 就是id為element的DOM元素
    // this 就是當前觸發事件的span元素
    alert( event.delegateTarget === this); // false 
} );


// 為id為element的元素中的所有span元素繫結click事件
$("#element span").bind( "click", function(event){
    // event.delegateTarget 就是當前觸發事件的span元素
    // this 就是當前觸發事件的span元素
    alert( event.delegateTarget === this ); // true
} );



相關文章