防止點擊通過格

我有一個div容器，其中包含幾個「行」的數據，列表中的每個項目都在它自己的「listRow」div中。我使用jQuery使「listRow」divs可選，通過點擊時切換CSS樣式。在每行中還有一個圖像div，浮動在其父「listRow」div的右側，幷包含onclick事件。當我點擊圖像div時，onclick事件觸發，但父級「listRow」div也被點擊並「選中」。防止點擊通過格

如何防止點擊我的圖像div？

僞的html代碼：

<div class="listContainer"> 
    <div class="listRow" id="listRow1"> 
     <div class="listItemName">List item #1</div> 
     <div class="listItemIcon"><img src="images/icon.png"></div> 
    </div> 
    <div class="listRow" id="listRow2"> 
     <div class="listItemName">List item #2</div> 
     <div class="listItemIcon"><img src="images/icon.png"></div> 
    </div> 
</div>

jQuery代碼：

$("div.listRow").click(function(){ 
    $(this).toggleClass("selected"); 
})

來源

2013-12-12 xPox

所以你不想讓圖像觸發點擊事件？ – TreeTree

你會使用event.stopPropagation()：

event.stopPropagation() - 冒泡的DOM樹防止事件，阻止任何父處理程序被通知事件。

在div.listItemIcon的click()事件，防止事件冒泡：

$('div.listItemIcon').click(function(e){ 
    e.stopPropagation(); 
}); 

$("div.listRow").click(function(){ 
    $(this).toggleClass("selected"); 
});

jsFiddle example here.

來源

2013-12-12 14:49:48 lifetimes

這樣做。謝謝！ – xPox

在圖像的點擊功能，如果你搶事件並使用stopPropagation()函數，那麼應該防止事件發生該元素的父母。例如。

$('div.listItemIcon').click(function(e){ 
    //your code here 
    e.stopPropagation(); 
});

來源

2013-12-12 14:50:36 Don

防止點擊通過格

回答

相關問題