event.preventDefault vs event.stopPropagation
event.preventDefault vs event.stopPropagation
提问于 2013-08-09 20:59:59
有人能解释一下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);
}
});
}
});
});为什么？
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-08-09 21:03:27
我不是Javascript专家，但据我所知：
stopPropagation用于确保事件不会向上冒泡。例如：点击一个<td>标签也会在它的父<tr>上触发点击事件，然后在它的父<table>上触发点击事件，依此类推。stopPropagation阻止了这种情况的发生。
preventDefault用来停止一个元素的正常动作，例如。单击链接处理程序中的preventDefault将停止正在跟踪的链接，或者单击提交按钮将停止正在提交的表单。
Stack Overflow用户
发布于 2013-08-09 21:11:43
子对象上的
stopPropagation将阻止该事件在父对象上发生(子对象上的整个ancestors)preventDefault将停止该子对象上的事件，但它将在其父对象(以及祖先！)上发生！)
现在，在您的代码中，哪个是父对象？哪个是孩子？img是孩子，tr是父亲(老实说，是祖父母)，所以猜猜stopPropagation代码应该在哪里。
Stack Overflow用户
发布于 2013-08-09 21:09:34
事件preventDefault From W3C:
event.preventDefault()方法会阻止元素的默认操作发生。例如：
阻止提交按钮提交表单阻止链接跟随URL
事件stopPropagation From W3C
event.stopPropagation()方法停止将事件冒泡到父元素，从而阻止执行任何父事件处理程序。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18147242
复制相关文章
相似问题
腾讯云开发者
