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

问题描述

他们似乎在做同样的事情...是一个现代和一个老？还是不同的浏览器支持？

当我自己处理事件（没有框架）时，我只是一直检查两者并执行两者。 （我也返回false ，但是我觉得这不符合 node.addEventListener 附带的事件） 。

那么为什么两者呢？我应该继续检查吗？或者实际上有差异吗？

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

解决方案

stopPropagation 阻止事件冒泡起事件链。

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

让我们说你有

 < div id =foo> 
< button id =but/> 
< / div> 
 
 $（＃foo）。click（function（）{
 //鼠标点击div 
}）; 
 
 $（＃but）。click（function（ev）{
 //鼠标点击按钮
 ev.stopPropagation（）; 
}）; 
  

示例

<点击（function（event）{event.preventDefault（）;}）; $（＃，＃，＃ foo）点击（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 只调用按钮点击处理程序，而 divs点击处理程序永远不会触发

如果您只是 preventDefault ，则只有浏览器的默认操作被停止，但是div的点击处理程序仍然触发。

以下是来自 MDN 和 MSDN

MSDN：

< c $ c>

• event.preventDefault


• event.returnValue

event.stopPropagation

MDN：

• 事件.cancelBubble


• event.preventDefault


• event.stopPropagation

对于IE9和FF，您只需使用preventDefault& stopPropagation。

为了支持IE8，并将 stopPropagation 替换为 cancelBubble 并用 returnValue

替换 preventDefault

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 stops the event from bubbling up the event chain.

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

Let's say you have

<div id="foo">
 <button id="but" />
</div>

$("#foo").click(function() {
   // mouse click on div
});

$("#but").click(function(ev) {
   // mouse click on button
   ev.stopPropagation();
});

Example

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

With stopPropagation only the buttons click handler is called and the divs click handler never fires.

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

Below are some docs on the DOM event objects from MDN and MSDN

MSDN:

• event.cancelBubble
• event.preventDefault
• event.returnValue
• event.stopPropagation

MDN:

• event.cancelBubble
• event.preventDefault
• 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屋！