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

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

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

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

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

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

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

这是这里的引语

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%的时间!错误地“停止”事件可能导致您 无数的麻烦接踵而来;你的插件可能无法工作 第三方插件可能会被砖化。或者更糟——你的代码 破坏站点的其他功能。