jQuery event.preventDefault 与 event.stopPropagation
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18147242/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
event.preventDefault vs event.stopPropagation
提问by Ionut Flavius Pogacian
Can someone explain what's the difference between event.preventDefault()and event.stopPropagation()?
有人可以解释event.preventDefault()和之间有什么区别event.stopPropagation()吗？
I have a table and within that table I have an img tag.
我有一张桌子，在那个桌子里我有一个 img 标签。
When I click the img tag, I want to see a popup.
当我点击 img 标签时，我想看到一个弹出窗口。
But I also want to stop the selection of multiple rows, so I use:
但我也想停止选择多行，所以我使用：
$("table.items tbody tr").click(function(event) {
event.stopPropagation();
});
When I use the js code, the popup does not appear;
当我使用js代码时，没有出现弹窗；
If I delete the js code, the popup works.
如果我删除了 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);
}
});
}
});
});
Why?
为什么？
回答by sevenseacat
I am not a Javascript expert but as far as I know:
我不是 Javascript 专家，但据我所知：
stopPropagationis used to make sure the event doesn't bubble up the chain. eg. a click on a <td>tag would also fire click events on it's parent <tr>, and then its parent <table>, etc. stopPropagationprevents this from happening.
stopPropagation用于确保事件不会在链上冒泡。例如。点击一个<td>标签也会触发它的 parent 上的点击事件<tr>，然后它的 parent<table>等会stopPropagation阻止这种情况发生。
preventDefaultis used to stop the normal action of an element, eg. preventDefaultin a click handler on a link would stop the link being followed, or on a submit button would stop the form being submitted.
preventDefault用于停止元素的正常动作，例如。preventDefault在链接上的点击处理程序中将停止跟踪链接，或者在提交按钮上将停止提交表单。
回答by Ionut Flavius Pogacian
stopPropagationon a childwill stop that event from happening on the parent(the entire ancestors)preventDefaulton a childwill stop the event on the child but it will happen on it's parent(and the ancestors too!)
stopPropagation在孩子上将阻止该事件发生在 父母（整个祖先）上preventDefault在孩子身上会停止在孩子身上发生的事件，但它会发生在它的父母身上（还有祖先身上！）
Now in your code which is the parent? which is the child? imgis child tris parent(well grandparent to be honest), So guess where the stopPropagationcode should be.
现在在你的代码中哪个是父级？哪个是孩子？img是孩子tr是父母（老实说是祖父母），所以猜stopPropagation代码应该在哪里。
回答by Fals
Event preventDefaultFrom W3C:
The event.preventDefault() method stops the default action of an element from happening. For example:
Prevent a submit button from submitting a form Prevent a link from following the URL
event.preventDefault() 方法阻止元素的默认操作发生。例如：
防止提交按钮提交表单 防止链接跟随 URL
Event stopPropagationFrom W3C:
The event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.
event.stopPropagation() 方法会阻止事件冒泡到父元素，从而阻止执行任何父事件处理程序。
