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

小编典典

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

all

他们似乎在做同样的事情……
一个现代的，一个古老的？或者它们是否被不同的浏览器支持？

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

那为什么两者兼而有之？我应该继续检查两者吗？还是真的有区别？

（我知道，很多问题，但它们都是一样的=））

阅读 251

2022-02-28

共1个答案

小编典典

stopPropagation防止当前事件在捕获和冒泡阶段进一步传播。

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

2022-02-28