!! javascript
The more we work with advanced, accessible, and crawlable web applications, the more control we need over element events. Mouseenter/leave events, keypress events, and the classic click event are probably the most-listened to events. Unfortunately many people, including myself, have been incorrectly handling event stoppage. In short: a majority of JavaScript framework users are killing the bubbles without knowing it.
我们与高级，可访问且可爬网的Web应用程序合作的越多，我们对元素事件的控制就越需要。 Mouseenter / leave事件，按键事件和经典Click事件可能是事件中听得最多的。 不幸的是，包括我自己在内的许多人都在错误地处理事件停止。 简而言之：大多数JavaScript框架用户都在不知不觉中消除了泡沫。
There are two main methods involved in "stopping" event actions: Event.preventDefault and Event.stopPropagation. There is a huge difference in what these two methods accomplish, which you will see below. You'll also learn that blindly using JavaScript framework "stop" methods could lead to huge problems in your web application!
“停止”事件操作涉及两种主要方法： Event.preventDefault和Event.stopPropagation 。 这两种方法的完成有很大的不同，您将在下面看到。 您还将学习盲目使用JavaScript框架的“停止”方法可能会在您的Web应用程序中导致巨大的问题！
Event.preventDefault (Event.preventDefault)
The preventDefault method prevents an event from carrying out its default functionality. For example, you would use preventDefault on an A element to stop clicking that element from leaving the current page:
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!');
};
While the element's default functionality is bricked, the event continues to bubble up the DOM.
虽然元素的默认功能是固定的，但事件继续使DOM冒泡。
Event.stopPropagation (Event.stopPropagation)
The second method, stopPropagation, allows the event's default functionality to happen but prevents the event from propagating:
第二种方法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 effectively stops parent elements from knowing about a given event on its child.
stopPropagation有效地阻止父元素知道其子元素上的给定事件。
Dojo的dojo.stopEvent和MooTools的Event.stop (Dojo's dojo.stopEvent & MooTools' Event.stop)
Here is where you can get into trouble: using a framework's custom "stop". Each framework has one but they all basically do the same thing:
在这里您可能会遇到麻烦：使用框架的自定义“停止”。 每个框架都有一个，但是它们基本上都做相同的事情：
//in mootools....
Event.stop = function(){
//does both!
return this.stopPropagation().preventDefault();
}
//mootools usage
myElement.addEvent('click',function(e){
//stop the event - no propagation, no default functionality
e.stop();
});
//in Dojo
dojo.stopEvent = function(/*Event*/ evt){
// summary:
// prevents propagation and clobbers the default action of the
// passed event
// evt: Event
// The event object. If omitted, window.event is used on IE.
evt.preventDefault();
evt.stopPropagation();
// NOTE: below, this method is overridden for IE
}
//dojo usage
dojo.connect(myElement,'onclick',function(e){
//stop the event - no propagation, no default functionality
dojo.stopEvent(e);
});
The method executes both preventDefault and stopPropagation where chances are you only care about preventing the default functionality. I recently ran into this issue with a Dojo plugin. After exploring the source code, I quickly realized that both preventDefault and stopPropagation were being called, and all that was needed was preventDefault. When I updated the source to simply use preventDefault, every subsequent piece was working as it should!
该方法同时执行preventDefault 和 stopPropagation ，您只在乎防止默认功能。 我最近遇到了一个Dojo插件问题。 在浏览了源代码之后，我很快意识到， preventDefault和stopPropagation都被调用了，而所需要的只是preventDefault 。 当我将源代码更新为仅使用preventDefault ，随后的每个部分都按preventDefault工作！
拯救泡泡！ (Save The Bubbles!)
While a simple stop method allows us to quickly handle events, it's important to think about what exactly you want to happen with bubbling. I'd bet that all a developer really wants is preventDefault 90% of the time! Incorrectly "stopping" an event could cause you numerous troubles down the line; your plugins may not work and your third party plugins could be bricked. Or worse yet -- your code breaks other functionality on a site. Save the bubbles!
尽管简单的停止方法可以使我们快速处理事件，但考虑到冒泡到底要发生什么，这一点很重要。 我敢打赌，开发人员真正想要的只是90％的时间是preventDefault ！ 错误地“停止”事件可能会导致大量麻烦。 您的插件可能无法正常工作，并且第三方插件可能会变砖。 更糟糕的是，您的代码破坏了网站上的其他功能。 保存气泡！
翻译自: https://davidwalsh.name/javascript-events
!! javascript