jquery - 使用 jQuery 捕获 div 内的两个不同的单击事件

Question

我在 div 内放置了一张图像和一个复选框。里面有两个不同的点击事件。一是:

1. 当我单击该复选框时，该复选框应被选中(选中)，另一个是
2. 当我点击图像时，应该会出现一个灯箱。

发生了什么；当我单击图像时，灯箱出现，但是当我单击复选框时，灯箱再次出现。

<div class="divWrap">
    <div class="imageWrap">
        <img src="abc.jpg">
        <div id="checkbox">
                <input type="checkbox" value="None" id="checkbox1" name="check1" />
        </div>
    </div>
</div>

我无法在 jQuery 中正确编码。有人可以帮忙吗？

Answer 1

$(".imageWrap img").click(function() {
    alert("image clicked");
});

$(".imageWrap checkbox").click(function() {
    alert("checkbox clicked");
});

<小时/>

$(".imageWrap").click(function(event) {
    var $target = $(event.target);
    if ( $target.is("img") ) {
        alert("image clicked");
    }
    else if ( $target.is("checkbox") ) {
        alert("checkbox clicked");
    }
});