单击DIV中的可点击图像不应影响DIV本身

Question

我在div里面有一张图片。div必须在单击时调整大小，所以我使用jQuery来切换具有不同高度的类。

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

但是我也需要用a href将一个图像插入到div中，这将打开一个照明盒。点击图片不仅打开了灯箱，而且还扩展了它下面的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');
});

我使用parent()是因为有多个div class="class"__实例。

这样，div class="toggle"在DOM中就更低了，但却完全覆盖了div class="class"。单击切换将展开/收缩两个div。带有a href的图像被放置在div class="class"中，因此它在DOM中更高(单击它不会触发切换操作)，但在两个div之上(因此，光照盒就像一个champ一样工作)。

Answer 2

您可以尝试在这里使用e.stopPropagation()来防止其父级的click事件冒泡：

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

因为我不知道您的HTML标记，所以我假设您的图像是.class元素的子元素。