點擊一個DIV內可點擊圖片上應該不會影響DIV本身

Question

我有一個div內的圖像。該div必須在點擊調整，所以我使用jQuery切換與不同高度的類。

$(document).ready(function(){ 
    $('.class').on('click', function() { 
    $(this).toggleClass('clicked'); 
    }); 
}); 

但我也需要插入的圖像與a href股利，這將打開一個燈箱。點擊圖片不僅會打開燈箱，還會展開它下面的div。有沒有辦法點擊圖像不會影響div？我試過z-index，但沒有奏效。

Answer 1

事實證明，點擊真不得不去通過DOM結構，因此它會觸發jQuery的燈箱。插入div class="toggle"到div class="class"解決了這一問題。然後我修改了jQuery：

$('.toggle').on('click', function() { 
$(this).toggleClass('clicked'); 
$(this).parent().toggleClass('clicked'); 
}); 

我使用父（），因爲是div class="class"多個實例。

這種方式div class="toggle"在DOM中較低，但完全覆蓋div class="class"。點擊切換將同時展開/收縮兩個div。與a href圖像被放置在div class="class"所以它在DOM更高版本（點擊它，將不會觸發切換動作），但在視覺上都div的上方（所以收藏正在如飛）。

Answer 2

你可以嘗試使用e.stopPropagation()這裏以防止click事件冒泡到其父：

$('.class img').on('click', function(e) { 
    e.stopPropagation(); 
}); 

因爲我不知道你的HTML標記，我認爲你的圖片是你.class元素的兒童。