event.stopPropagation 和 event.preventDefault 有什么区别? [英] What's the difference between event.stopPropagation and event.preventDefault?

问题描述

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

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

<块引用>

那为什么两者都有呢?我应该继续检查两者吗?还是真的有区别?

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

解决方案

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

preventDefault 阻止浏览器对该事件进行的默认操作.

示例

preventDefault

$("#but").click(function (event) {event.preventDefault()})$("#foo").click(function () {alert("父点击事件被触发！")})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="foo"><button id="but">button</button>

停止传播

$("#but").click(function (event) {event.stopPropagation()})$("#foo").click(function () {alert("父点击事件被触发！")})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="foo"><button id="but">button</button>

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

如果您使用 preventDefault，只会停止浏览器的默认操作，但仍会触发 div 的点击处理程序.

下面是一些来自 MDN 的关于 DOM 事件属性和方法的文档:

• event.cancelBubble
• event.preventDefault()
• event.returnValue
• event.stopPropagation()

对于 IE9 和 FF，您可以使用 preventDefault &停止传播.

支持IE8及更低版本，将stopPropagation替换为cancelBubble，将preventDefault替换为returnValue

They seem to be doing the same thing...
Is one modern and one old? Or are they supported by different browsers?

When I handle events myself (without framework) I just always check for both and execute both if present. (I also return false, but I have the feeling that doesn't work with events attached with node.addEventListener).

So why both? Should I keep checking for both? Or is there actually a difference?

(I know, a lot of questions, but they're all sort of the same =))

解决方案

stopPropagation prevents further propagation of the current event in the capturing and bubbling phases.

preventDefault prevents the default action the browser makes on that event.

Examples

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>

stopPropagation

$("#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>

With stopPropagation, only the button's click handler is called while the div's click handler never fires.

Where as if you use preventDefault, only the browser's default action is stopped but the div's click handler still fires.

Below are some docs on the DOM event properties and methods from MDN:

• event.cancelBubble
• event.preventDefault()
• event.returnValue
• event.stopPropagation()

For IE9 and FF you can just use preventDefault & stopPropagation.

To support IE8 and lower replace stopPropagation with cancelBubble and replace preventDefault with returnValue

这篇关于event.stopPropagation 和 event.preventDefault 有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！