event.preventDefault ();停止元素的默认动作。

event.stopPropagation ();防止事件在DOM树中冒泡，防止任何父处理程序被通知该事件。

例如，如果在DIV或FORM中附加了一个带有单击方法的链接，它将阻止DIV或FORM单击方法被触发。

事件。preventDefault-停止浏览器默认行为。现在来看看浏览器的默认行为。假设你有一个锚标签，它有一个href属性，这个锚标签嵌套在一个div标签中，这个div标签有一个点击事件。锚标签的默认行为是，当点击锚标签时，它应该导航，但什么事件。preventDefault的作用是在这种情况下停止导航。但它从未停止事件的冒泡或事件的升级

<div class="container">
 <a href="#" class="element">Click Me!</a>
</div>

$('.container').on('click', function(e) {
 console.log('container was clicked');
});

$('.element').on('click', function(e) {
  e.preventDefault(); // Now link won't go anywhere
  console.log('element was clicked');
});

结果将是

"元素被点击"

"容器被点击"

现在的事件。停止传播:停止事件冒泡或事件升级。现在来看上面的例子

$('.container').on('click', function(e) {
  console.log('container was clicked');
});

$('.element').on('click', function(e) {
  e.preventDefault(); // Now link won't go anywhere
  e.stopPropagation(); // Now the event won't bubble up
 console.log('element was clicked');
});

结果将是

"元素被点击"

更多信息请参考这个链接 https://codeplanet.io/preventdefault-vs-stoppropagation-vs-stopimmediatepropagation/

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

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

例子

preventDefault

$(" #但是”)。点击(函数(事件){ event.preventDefault () }) $ (" # foo”)。点击(函数(){ 警报(“父点击事件触发!”) }) < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> < div id = " foo " > <按钮id = "但是" > < /按钮>按钮 < / div >

stopPropagation

$(" #但是”)。点击(函数(事件){ event.stopPropagation () }) $ (" # foo”)。点击(函数(){ 警报(“父点击事件触发!”) }) < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> < div id = " foo " > <按钮id = "但是" > < /按钮>按钮 < / div >

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

如果你使用preventDefault，只有浏览器的默认动作被停止，但div的点击处理程序仍然会触发。

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

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

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

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

event.preventDefault ();停止元素的默认动作。

event.stopPropagation ();防止事件在DOM树中冒泡，防止任何父处理程序被通知该事件。

例如，如果在DIV或FORM中附加了一个带有单击方法的链接，它将阻止DIV或FORM单击方法被触发。

这是这里的引语

Event.preventDefault

preventDefault方法阻止事件执行其默认功能。例如，你可以在A元素上使用preventDefault来阻止点击该元素离开当前页面:

//clicking the link will *not* allow the user to leave the page 
myChildElement.onclick = function(e) { 
    e.preventDefault(); 
    console.log('brick me!'); 
};

//clicking the parent node will run the following console statement because event propagation occurs
logo.parentNode.onclick = function(e) { 
    console.log('you bricked my child!'); 
};

虽然元素的默认功能是砖砌的，但事件继续在DOM中冒泡。

Event.stopPropagation

第二个方法stopPropagation允许事件的默认功能发生，但阻止事件传播:

//clicking the element will allow the default action to occur but propagation will be stopped...
myChildElement.onclick = function(e) { 
    e.stopPropagation();
    console.log('prop stop! no bubbles!'); 
};

//since propagation was stopped by the child element's onClick, this message will never be seen!
myChildElement.parentNode.onclick = function(e) { 
    console.log('you will never see this message!'); 
};

stopPropagation有效地阻止父元素知道其子元素上的给定事件。

虽然一个简单的停止方法允许我们快速处理事件，但它是 重要的是要考虑你到底想要发生什么 冒泡。我敢打赌开发人员真正想要的是preventDefault 90%的时间!错误地“停止”事件可能导致您 无数的麻烦接踵而来;你的插件可能无法工作 第三方插件可能会被砖化。或者更糟——你的代码 破坏站点的其他功能。

event.preventDefault () 阻止浏览器的默认行为(例如打开链接)，但不能阻止事件在DOM中冒泡。 event. stoppropagation()阻止事件在DOM中冒泡，但不会停止浏览器的默认行为。 通常在jQuery代码中看到，它防止浏览器的默认行为，防止事件冒泡 DOM，并立即从任何回调返回。

看看这篇非常漂亮和简单的4分钟阅读文章，上面的例子来自上面的文章。