event.preventDefault vs event.stopPropagation [重复]答案

【问题标题】：event.preventDefault vs event.stopPropagation [duplicate]event.preventDefault vs event.stopPropagation [重复]
【发布时间】：2013-08-11 10:02:22
【问题描述】：

有人能解释一下event.preventDefault() 和event.stopPropagation() 之间的区别吗？

我有一个表格，在那个表格中我有一个 img 标签。

当我点击 img 标签时，我想看到一个弹出窗口。

但我也想停止选择多行，所以我使用：

$("table.items tbody tr").click(function(event) {
        event.stopPropagation();
    });

当我使用js代码时，没有出现弹窗；

如果我删除 js 代码，弹出窗口会起作用。

$(".info").live("click",function(e){
    //console.log('ok');
    e.stopPropagation();
    var elem = $(this);
    var id = $(this).attr("id").replace("image_","container_");
    $('#'+id).toggle(100, function() {
        if($(this).css('display') == 'block') {
            $.ajax({
                url: "$url",
                data: { document_id:elem.attr('document_id') },
                success: function (data) {
                    $('#'+id).html(data);
                }
            });
            }
        });
});

为什么？

【问题讨论】：

这会帮助你davidwalsh.name/javascript-events
请显示您的 html 结构，以便我们知道图像与表格结构的关系
在click 上停止选择为时已晚；使用mousedown。

标签： javascript jquery preventdefault stoppropagation

【解决方案1】：

我不是 Javascript 专家，但据我所知：

stopPropagation 用于确保事件不会冒泡。例如。点击<td> 标记也会触发其父级<tr> 上的点击事件，然后是其父级<table> 等。stopPropagation 可防止这种情况发生。

preventDefault 用于停止元素的正常动作，例如。 preventDefault 在链接上的单击处理程序中会停止链接被跟踪，或者在提交按钮上会停止提交表单。

【讨论】：

@CrisimIlNumenoreano 您的评论毫无意义。 Sevenseacat 的答案在我看来 100% 正确，可以通过 dup question 上的答案以及event.preventDefault() 和 event.stopPropagation() 的 jQuery 文档进行检查。
stopPropagation 是否也会停止捕获阶段？
我认为围绕这两个函数的混淆（如果算上stopImmediatePropagation，则为三个）是对停止传播是否也会自动阻止默认值的疑问。好像可以。

【解决方案2】：

child 上的stopPropagation 将阻止该事件在 parent（整个祖先）
child 上的preventDefault 将停止该子级的事件，但它将发生在它的父母（以及祖先！）

现在在您的代码中哪个是父级？哪个是孩子？ img 是孩子 tr 是父母（老实说是祖父母），所以猜猜stopPropagation 代码应该在哪里。

【讨论】：

我觉得这是错误的。我认为 stopPropagation 不会阻止孩子的行为发生？
您可能在谈论 preventDefault，但我的评论针对的是 stopPropagation 解释。用户 rps 在我发表评论后更正了他的答案。
@Trisped，@user1884155 是对的，你说的例子似乎是preventDefault 的。最初我犯了一个错误，说stopPropagation 也会停止任何孩子的事件，后来@user1884155 更正了这一点。
@user1884155 抱歉，复制粘贴错误。如你所说，应该是preventDefault。

【解决方案3】：

事件preventDefault From W3C:

event.preventDefault() 方法停止默认行为元素从发生。例如：

防止提交按钮提交表单跟随网址

事件stopPropagation From W3C:

event.stopPropagation() 方法阻止事件冒泡到父元素，防止任何父事件处理程序执行。

【讨论】：