点击事件中断提交事件答案

【问题标题】：Click event interrupts submit event点击事件中断提交事件
【发布时间】：2013-04-20 11:47:46
【问题描述】：

想象一下这样的事情。

<!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，您会看到 'Clicked' 三次。我的特殊之处在于，这似乎跳过了表单提交事件。如果我删除 Click 绑定，则提交事件会正确触发。有没有在表单上手动触发 submit() 的方法？我知道我可以使点击事件更具体，因此它不适用于提交按钮，但是......我有一个奇怪的用例。

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

【问题讨论】：

你为什么在点击时打电话给e.preventDefault()
您正在为所有DIVs 绑定点击事件。所以它显示了3次。按钮位于 # div 内。所以会产生3次点击事件

标签： javascript jquery-events event-bubbling

【解决方案1】：

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()。

【讨论】：

Aaah... 只需删除 e.preventDefault() 即可修复它。我出于某种原因认为 preventDefault() 只会影响当前事件类型。谢谢！
很高兴它成功了。查看 jQuery 文档是个好主意：api.jquery.com/event.preventDefault 它易于阅读并且有一些示例，因此它是使用新 jQuery 函数时的最佳起点。

【解决方案2】：

您可以使用event.stopPropagation() 来阻止事件冒泡到其他元素。单击此处无需致电e.preventDefault() - 它会停止执行默认操作，这不是您想要的。

【讨论】：

【解决方案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');
});

【讨论】：