event.preventDefault vs 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); } }); } }); }); 

为什么？

Answer 1

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

stopPropagation用于确保事件不会冒泡链。 例如。 单击

标签也会触发其父

上的点击事件，然后触发其父

等stopPropagation可防止这种情况发生。

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

Answer 2

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

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

Answer 3

事件preventDefault来自W3C的默认：

event.preventDefault（）方法停止发生元素的默认操作。 例如：

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

活动stopPropagation从W3C传播 ：

event.stopPropagation（）方法停止将事件冒泡到父元素，从而阻止执行任何父事件处理程序。