Javascript event.preventDefault与event.stopPropagation

有人能解释一下

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);
                }
            });
            }
        });
});

---

为什么？

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

stopPropagation

用于确保事件不会在链上冒泡。例如，单击一个

标记也会在它的父项

上触发单击事件，然后它的父项

，等等。

stopPropagation

防止这种情况发生

preventDefault

用于停止元素的正常操作，例如链接上的单击处理程序中的

preventDefault

将停止链接，或者提交按钮上的按钮将停止表单提交。

事件

event.preventDefault（）方法停止 元素不发生。 例如：

阻止提交按钮提交表单阻止链接 跟随URL

活动：

方法的作用是：停止将事件冒泡到 父元素，防止任何父事件处理程序 执行

• stopPropagation

  对子对象执行操作将阻止该事件在子对象上发生 父母（整个祖先）
• 子项上的

  preventDefault

  将停止子项上的事件，但 将发生在它的父代（以及祖先！）

---

现在在您的代码中，哪一个是父级？哪个是孩子

img

是孩子

tr

是父母（老实说是祖父母），所以猜一下

stopPropagation

代码应该在哪里。

这将帮助您显示html结构，以便我们知道图像与表结构的关系。现在停止选择

单击
，为时已晚；使用
mousedown
。我觉得这是错误的。我认为stopPropagation并不能阻止孩子的行为发生？你可能在谈论预防违约，但我的评论是针对stopPropagation的解释。用户rps在我的评论后更正了他的答案。@trispid，@user1884155是正确的，您所说的示例似乎是
preventDefault
。最初我犯了一个错误，说
stopPropagation
也会停止任何子事件，后来@user1884155@user1884155更正了这个错误。对不起，复制粘贴错误。正如您所说，应该是
preventDefault
。@crisimilnumenorean您的评论毫无意义。Sevensacat的答案在我看来是100%正确的，可以使用上的答案以及和的jQuery文档进行检查。StopperPropagation是否也会停止捕获阶段？我认为这两个函数的混淆（如果算上StopperImmediatePropagation，则为三个）对于停止传播是否也会自动防止默认值，存在疑问。似乎有可能。