防止在元素内单击时触发点击事件，包括其所有子元素

Question

我有一个脚本可以打开和关闭固定元素。有一个黑色背景的叠加层（就像点击视频时的 facebook），当用户点击黑色的任何地方时，叠加层将关闭。但是，如果用户点击内部容器，或者任何元素应该保持打开状态。

如果我单击任何子项，我的脚本将关闭内部容器。如何预防？

docu = $(document),
quot = $('.quote'),
quot_over = $('.quote_overlay'),
quot_cont = $('.quote_container');

quot.click(function(event) {
    quot_over.toggle(1, function() {
        docu.click(function(event) {
            var target = $(event.target);

            if(!target.is(quot_cont)) {
                quot_over.hide();

                docu.unbind('click');
            }
        });
    });
});

Answer 1

我不确定为什么你有这行：

quot_over.toggle(1, function()

但这会在评估点击位置之前立即将其关闭，因此您需要将其删除。

其次，您只检查点击是否在 quote_container 上，而不检查点击是否在 quote_container 的任何 children.

上

工作 JSFiddle：http://jsfiddle.net/dsnosw5p/4/

防止在元素内单击时触发点击事件，包括其所有子元素

Prevent click event to fire when clicked within element, including any and all of its children elements

jquery

events

children