Question

    <div class="parent">
        <div class="child">
        </div>
    </div>
    <script type="text/javascript">
    $(document).on("click", ".parent", function(event){
        doAjaxCall();
    });

    $(document).on("click", ".child", function(event){
        doSomething(); // and DON'T call doAjaxCall();
    });
</script>

event.stopPropagation();和return false;也无效。可能是什么问题呢？

编辑：好吧，很明显它正在研究js小提琴：http://jsfiddle.net/Smbb4/ 我必须再次检查我的代码..

Edit2：解决方案：

    $('.parent').click(function(event) {

        if ( $(event.target).closest('.child').length > 0 ) {
            var close = $(event.target).closest('.child');
            var windowID = close.data('windowid');

            closeWindow(windowID);
            return false;
        }
        });

Answer 1

对于父级，您只需要一个单击处理程序。以常规方式处理事件，除非原始目标在孩子内部，在这种情况下，你分支并做一些不同的事情。

$(document).on("click", ".parent", function(event){

    if ( $(event.target).closest('.child').length > 0 ) {
        doSomething;
        return false;
    }

    doAjaxCall();
});

Answer 2

试试这种方式

$(".parent").click(function() {

});

$(".child").click(function() {

});

它应该可以正常工作。没有必要将它们放在document.ready function

中

Answer 3

发现问题：

因为您正在使用body元素而不是直接使用   img.theater事件将泡到身体元素和那个   它是如何工作的。

在事件冒泡过程中.theater-wrapper元素点击事件   会被触发，所以你会看到它。

jQuery on() stopPropagation not working?

解决方案：

$('.parentParent').on("click", ".child", function(event){});

jQuery click（）上的div触发了父对象click（）事件

3 个答案: