Question

我里面有简单的div和复选框。这两个元素都与onClick事件绑定。首先在内部元素上触发复选框，然后在div上触发。我的问题是：在第一个事件上升后直到下一次点击，这可能会阻止DOM上的任何其他事件吗？换句话说，我可以在复选框onClick中停止来触发div中的事件吗？

<div onclick="divOnClic(this);" style="width: 200px; height: 200px ; background-color: red">
    <input type="checkbox" onclick="checkboxOnClick(this);"/>
</div>

function divOnClic(e) {
        alert('z diva');
    }

    function checkboxOnClick(e) {

        alert('z checka');
        e.preventDefault();

    }

这是实例http://jsfiddle.net/QK43u/1/

Answer 1

这可以解决您的问题：

<div onclick="divOnClic(event);" style="width: 200px; height: 200px ; background-color: red">
        <input type="checkbox" onclick="checkboxOnClick(event);"/>
    </div>

    function divOnClic(e) {
            alert('z diva');
        }

        function checkboxOnClick(e) {

            alert('z checka');
            e.stopPropagation()

        }

Answer 2

尝试使用：

e.stopPropagation();

Answer 3

preventDefault（）方法可防止执行默认事件。它不会阻止冒泡。您需要使用stopPropagation（）方法。

$('#myDiv').on('click',divOnClick);
$('#myCheckBox').on('click',checkboxOnClick);

function divOnClick(e) {
  alert('div got clicked');
}
function checkboxOnClick(e) {
  e.stopPropagation();
  alert(e.isPropagationStopped());
 }

注意：我建议不要使用内联样式或内联事件处理程序。请看这里的小提琴：http://jsfiddle.net/4Lged/7/

注意：事件冒泡来自内部元素并传播到外部元素。 div没有必要这样做。捕获是div的另一种方式将它的事件传播到树上。在那里，我们不会阻止事件传播。

Answer 4

您应该在函数调用中使用event。并使用stopPropagation()来阻止传播到父元素。

<div onclick="divOnClic(event);" style="width: 200px; height: 200px ; background-color: red">
    <input type="checkbox" onclick="checkboxOnClick(event);"/>
</div>

<script>
    function divOnClic(e) {
            alert('z diva');
        }

    function checkboxOnClick(e) {
        e.stopPropagation()
        alert('z checka');
    }
</script>

Jquery防止下一个事件冒泡

4 个答案: