event.stopPropagation和event.preventDefault有什么区别？

JavaScript

GO西门

2020-03-10

他们似乎在做同样的事情……是现代的还是老的？还是不同的浏览器支持它们？

当我自己处理事件（没有框架）时，我总是检查两者并执行（如果存在）。（我也是return false，但我有一种感觉不适用于附带的事件node.addEventListener）。

那么为什么两者都呢？我应该继续检查两者吗？还是实际上有区别？

（我知道，很多问题，但都是相同的=）

第505篇《event.stopPropagation和event.preventDefault有什么区别？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
前端Mandy 2020.03.10 

$("#but").click(function(event){
console.log("hello");
  event.preventDefault();
 });


$("#foo").click(function(){
 alert("parent click event fired !");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
  <button id="but">button</button>
</div>

白月光 2020.03.10

event.preventDefault(); 停止发生元素的默认操作。

event.stopPropagation(); 防止事件使DOM树冒泡，防止任何父处理程序收到该事件的通知。

例如，如果是的点击方法连接内的链接DIV或FORM还附加有点击的方法，它会阻止DIV或FORM从发射单击方法。

小小 2020.03.10

stopPropagation 阻止事件冒泡事件链。

preventDefault 阻止浏览器对该事件执行默认操作。

例子

preventDefault

$("#but").click(function (event) {
  event.preventDefault()
})
$("#foo").click(function () {
  alert("parent click event fired!")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
  <button id="but">button</button>
</div>

停止传播

$("#but").click(function (event) {
  event.stopPropagation()
})
$("#foo").click(function () {
  alert("parent click event fired!")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
  <button id="but">button</button>
</div>

使用stopPropagation，只有button的点击处理程序会被调用，而div的点击处理程序永远不会触发。

就像您使用一样preventDefault，只有浏览器的默认操作被停止，但div的单击处理程序仍然会触发。

以下是有关MDN中DOM事件属性和方法的一些文档：

对于IE9和FF，您可以只使用preventDefault和stopPropagation。

为了支持IE8和更低版本，请替换stopPropagation为cancelBubble和替换preventDefault为returnValue

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android