Question

想象一下这样的事情。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Testing event bubbling</title>
    <script src="js/jquery/jquery-2.0.0.js"></script>
    <script>
        $(document).on('click', 'div', function(e) {
            e.preventDefault();
            console.log('Clicked');
            return true;
        });
        $(document).on('submit', 'form', function(e) {
            e.preventDefault();
            console.log('Submitted');
        });

    </script>
</head>
<body>
<form>
    <div><div><div>
        Click this.
        <input type="submit">
    </div></div></div>
</form>

</body>
</html>

现在，当您点击提交按钮时，点击事件将被捕获并传播到所有DIV，您会看到“点击”按钮＆＃39;三次。我特有的是，这似乎跳过了表单提交事件。如果我删除Click绑定，则会正确触发提交事件。没有手动触发表单上的submit（）有没有办法解决？我知道我可以使click事件更具体，因此它不适用于提交按钮，但是...我有一个奇怪的用例。

我在这里弄错了什么？如果触发了一个事件，是否意味着忽略所有其他优先级较低的事件？

Answer 1

您可以使用event.stopPropagation()来阻止事件冒泡到其他元素。点击此处无需拨打e.preventDefault() - 它会停止正在执行的默认操作，而这不是您所追求的。

Answer 2

e.preventDefault()用于阻止某些控件的默认操作。例如，如果您单击某个链接，它将尝试加载其href，如果您单击提交按钮，它将尝试提交该表单。因此，preventDefault用于阻止这些操作。

如果您不希望提交为“中断”，换句话说，如果您要提交表单，请从点击事件中删除preventDefault。

现在，第二点，click事件传播了3次。你有类似的东西：

<div>
    Div 1
    <div>
        Div 2
    </div>
</div>

您将onclick方法绑定到页面上的每个<div>。所以，3个div，3个onclicks。如果所有div都重叠，那么当您单击内部div时，您也会单击它的父div，依此类推。如果您不希望事件传播到更深的div（可以将其视为“层”，则可以使用stopPropagation()。

Answer 3

您可以检查点击是否在输入字段中发生

$(document).on('click', 'div', function(e) {
    if(!$(e.target).is('input')){
        e.preventDefault();
    }  
    console.log('Clicked');
    return true;
});
$(document).on('submit', 'form', function(e) {
    e.preventDefault();
    console.log('Submitted');
});

单击事件中断提交事件

3 个答案: