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

发布于 2024-10-27 10:14:39 字数 250 浏览 1 评论 0原文

使用 Backbone.js 视图，假设我想包含以下事件：

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

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

原文

Using a Backbone.js View, say I want to include the following events:

    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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一杆小烟枪 2024-11-03 10:14:39

我一直在使用 e.stopImmediatePropagation(); 来阻止事件传播。我希望有一种更短的方法来做到这一点。我想返回 false；但这是由于我对 jQuery 的熟悉

回复收藏 0 原文

冬天旳寂寞 2024-11-03 10:14:39

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

The JQuery preventDefault method would also be a good option.

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

回复收藏 0 原文

沧笙踏歌 2024-11-03 10:14:39

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

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

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:

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

回复收藏 0 原文

似狗非友 2024-11-03 10:14:39

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

1

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

openPanel 将不会捕获任何或子级上的 click 事件。 code> （如果您的 标记中有图标）。

2

在 openPanel 方法的顶部，确保事件目标不是：

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()。

Two other methods that might work for you:

1

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

Then openPanel will not capture click events on any <a> or child of an <a> (in case you have an icon in your <a> tag).

2

At the top of the openPanel method, make sure the event target wasn't an <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 openPanel function to be called from elsewhere (from a parent view or another function on this view, for example). Just don't pass an event argument and it'll be fine. You also don't have to do anything special in your link function -- just handle the click event and move on. Although you'll probably still want to call event.preventDefault().

回复收藏 0 原文