取消委托单个事件答案

【问题标题】：Undelegate single event取消委托单个事件
【发布时间】：2014-09-17 18:52:15
【问题描述】：

我无法停止 UL 中 dom 元素上的单击事件，主要是在 itemClicked 方法中我想取消对单个元素的单击事件的委托。当单击列表中的项目时，尽管该项目具有 none 值，但仍会触发单击事件。有没有办法只对单击的单个元素使用取消委托？我不知道为什么，非常感谢任何帮助。

App.Views.AttributeSelectorView = Backbone.View.extend({

  itemClicked: function (event) {
    var $target = $(event.target);
    this.trigger('itemClicked', $target.data('attr'), $target.text());

    this.undelegateEvents();
  }, 
  events: {
    'click [role=menuitem]': 'itemClicked'
  }
});   


 attributeSelectorView.on('itemClicked', function(attribute, display){
    // .remove attribute
    query.add({
      attribute: attribute,
      display: display
    }, {
      merge: true
    });
  });

【问题讨论】：

itemClicked 不是 DOM 事件，它是主干事件。

标签： javascript jquery css backbone.js backbone-events

【解决方案1】：

尝试使用stopListening、it Tell an object to stop listening to events。

itemClicked: function (event) {
    var $target = $(event.target);
    this.trigger('itemClicked', $target.data('attr'), $target.text());

    this.stopListening();
  }

【讨论】：

【解决方案2】：

您正在单击处理程序本身中设置pointer-events 属性。当您更改其target 元素的样式时，点击事件已经发生。

您需要在点击发生之前设置该属性以使其生效。

或者，如果您知道要忽略点击的元素，您可以在点击处理程序中添加逻辑：

itemClicked: function(e) {

  if(!shouldIgnoreThisTarget) {
    this.trigger('...')
  }
}

在许多方面这更好。它将点击行为集中到一个地方，并减少了 CSS 和 JavaScript 之间的耦合。

【讨论】：

当您创建li 元素时（可能在您的视图的render 方法中，或者可能来自模板或HTML 文件），添加一个名为no-click-events 之类的描述性的类。然后在你的 CSS 中添加一条规则：.no-click-events { pointer-events: none; }.

【解决方案3】：

pointer-events 仅影响样式 - 因此它不会影响元素的功能（即 javascript 事件）。

如果你想阻止javascript中的默认点击行为，你可以从点击处理程序中return false，或者将event.preventDefault设置为true

【讨论】：