Javascript 如何使用 Backbone.js 停止事件传播？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5457915/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I stop event propagation with Backbone.js?
提问by Gunnar Lium
Using a Backbone.js View, say I want to include the following events:
使用 Backbone.js 视图，假设我想包含以下事件：
events: {
'click a': 'link',
'click': 'openPanel'
}
How can I avoid openPanel to be fired when I click on a link. What I want is to have a clickable box which will trigger an action, but this box can have elements which should trigger other actions, and not the parent action. Think for example Twitter.com, and links in Tweets/right hand panel.
当我单击链接时，如何避免 openPanel 被触发。我想要的是有一个可点击的框来触发一个动作，但这个框可以包含应该触发其他动作的元素，而不是父动作。例如 Twitter.com 和推文/右手面板中的链接。
回答by Tim Banks
I've been using e.stopImmediatePropagation();in order to keep the event from propagating. I wish there was a shorter way to do this. I would like return false; but that is due to my familiarity with jQuery
我一直在使用e.stopImmediatePropagation();以防止事件传播。我希望有一种更短的方法来做到这一点。我想返回假；但这是由于我对 jQuery 的熟悉
回答by jspooner
The JQuery preventDefaultmethod would also be a good option.
JQuerypreventDefault方法也是一个不错的选择。
window.LocationViewLI = Backbone.View.extend({
tagName: "li",
template: _.template('<a href="/locations/<%= id %>"><%= name %></a>'),
events: {
"click a": "handleClick"
},
handleClick: function(event) {
event.preventDefault();
console.log("LocationViewLI handleClick", this.model.escape("name") );
// debugger;
},
...
回答by Gabe Hollombe
Each of your event handlers will be passed an event object when it's triggered. Inside your handler, you need to leverage jQuery's event.stopPropagation() method. For example:
每个事件处理程序在触发时都会传递一个事件对象。在您的处理程序中，您需要利用 jQuery 的 event.stopPropagation() 方法。例如：
link: function(event) {
//do some stuff here
event.stopPropagation();
}
回答by colllin
Two other methods that might work for you:
可能对您有用的另外两种方法：
1
1
events: {
'click a': 'link',
'click *:not(a, a *)': 'openPanel'
}
Then openPanel will not capture clickevents on any <a>or child of an <a>(in case you have an icon in your <a>tag).
然后 openPanel 将不会捕获click任何<a>或子项上的事件<a>（如果您的<a>标签中有图标）。
2
2
At the top of the openPanelmethod, make sure the event target wasn't an <a>:
在openPanel方法的顶部，确保事件目标不是<a>：
openPanel: function(event) {
// Don't open the panel if the event target (the element that was
// clicked) is an <a> or any element within an <a>
if (event && event.target && $(event.target).is('a, a *')) return;
// otherwise it's safe to open the panel as usual
}
Note that both of these methods still allow the openPanelfunction to be called from elsewhere (from a parent view or another function on this view, for example). Just don't pass an eventargument and it'll be fine. You also don't have to do anything special in your linkfunction -- just handle the click event and move on. Although you'll probably still want to call event.preventDefault().
请注意，这两种方法仍然允许openPanel从其他地方调用该函数（例如，从父视图或此视图上的另一个函数）。只是不要传递event参数，它会没事的。你也不必在你的link函数中做任何特别的事情——只需处理点击事件并继续。尽管您可能仍想调用event.preventDefault().
回答by Julien
Return "false" in your "link" function.
在“链接”函数中返回“false”。
