他们似乎在做同样的事情……是现代的还是老的?还是不同的浏览器支持它们?
当我自己处理事件(没有框架)时,我总是检查两者并执行(如果存在)。(我也是return false
,但我有一种感觉不适用于附带的事件node.addEventListener
)。
那么为什么两者都呢?我应该继续检查两者吗?还是实际上有区别?
(我知道,很多问题,但都是相同的=)
他们似乎在做同样的事情……是现代的还是老的?还是不同的浏览器支持它们?
当我自己处理事件(没有框架)时,我总是检查两者并执行(如果存在)。(我也是return false
,但我有一种感觉不适用于附带的事件node.addEventListener
)。
那么为什么两者都呢?我应该继续检查两者吗?还是实际上有区别?
(我知道,很多问题,但都是相同的=)
event.preventDefault();
停止发生元素的默认操作。
event.stopPropagation();
防止事件使DOM树冒泡,防止任何父处理程序收到该事件的通知。
例如,如果是的点击方法连接内的链接DIV
或FORM
还附加有点击的方法,它会阻止DIV
或FORM
从发射单击方法。
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