Question

使用Backbone.js View，我想要包含以下事件：

    events: {
        'click a': 'link', 
        'click': 'openPanel' 
    }

单击链接时，如何避免触发openPanel。我想要的是有一个可以触发动作的可点击框，但是这个框可以包含应该触发其他动作的元素，而不是父动作。想想Twitter.com，以及推文/右侧面板中的链接。

Answer 1

我一直在使用e.stopImmediatePropagation();来阻止事件传播。我希望有一个更短的方法来做到这一点。我想回归虚假;但那是因为我对jQuery的熟悉

Answer 2

JQuery preventDefault方法也是一个不错的选择。

    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;
        },
        ...

Answer 3

每个事件处理程序在触发时都会传递一个事件对象。在处理程序中，您需要利用jQuery的event.stopPropagation（）方法。例如：

link: function(event) {  
  //do some stuff here
  event.stopPropagation();
}

Answer 4

可能适合您的其他两种方法：

1

events: {
    'click a': 'link', 
    'click *:not(a, a *)': 'openPanel' 
}

然后，openPanel将无法捕获click上的<a>个<a>或<a>的子项（如果您的openPanel代码中有图标）。

2

在<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 }：

openPanel

请注意，这两种方法仍然允许从其他地方调用event函数（例如，从父视图或此视图上的其他函数）。只是没有通过link论证，它会没事的。您也不必在event.preventDefault()函数中执行任何特殊操作 - 只需处理点击事件并继续操作即可。虽然您可能仍想要致电{{1}}。

Answer 5

在“链接”功能中返回“false”。

如何使用Backbone.js停止事件传播？

5 个答案:

1

2