骨干事件并不总是发生在“el”上答案

【问题标题】：Backbone event doesn't always happen on `el`骨干事件并不总是发生在“el”上
【发布时间】：2015-03-17 14:12:40
【问题描述】：

我正在开发自己的 Backbone TodoMVC 应用程序版本。到目前为止，这是我的code。

Backbone 事件哈希允许我们将事件侦听器附加到相对于 el 的自定义选择器，如果没有提供选择器，则直接附加到 el。事件采用键值对 'eventName selector': 'callbackFunction' 的形式，并支持多种 DOM 事件类型，包括 click、submit、mouseover、dblclick 等。

http://addyosmani.github.io/backbone-fundamentals/

'dblclick': 'showEdit' 对我来说似乎没有发生在 el 上。

当我双击内部.view-mode div 中的某个位置时，$(e.target) 就是那个.view-mode div。

但是当我在.view-mode 外部但在li 内部单击时，应该是$(e.taret)。

这是为什么？

代码：

todo.js

var app = app || {};

app.TodoView = Backbone.View.extend({
  tagName: 'li',

  className: 'list-group-item',

  template: _.template( $('#todo-template').html() ),

  render: function() {
    this.$el.html( this.template(this.model.toJSON()) );
    this.$el.find('.edit-mode').hide();
    this.$el.find('.remove-todo').hide();
    return this;
  },

  events: {
    'click input[type="checkbox"]': 'check',
    'mouseenter': 'showRemove',
    'mouseleave': 'hideRemove',
    'click .remove-todo': 'remove',
    'dblclick': 'makeEditable'
  },

  check: function(e) {
    var id = $(e.target).data('id');
    var model = app.todos.get(id);
    model.save({
      completed: true
    });
  },

  showRemove: function(e) {
    $(e.target).find('.remove-todo').show();
  },

  hideRemove: function(e) {
    $(e.target).find('.remove-todo').hide();
  },

  remove: function(e) {
    var $el = $(e.target);
    var id = $(e.target).data('id');
    var model = app.todos.get(id);
    model.destroy({
      success: function(model) {
        app.todos.remove(model);
        $el.closest('li').remove();
      },
      error: function() {
        alert('Unable to remove todo.');
      }
    });
  },

  makeEditable: function(e) {
    console.log($(e.target).html());
    $(e.target).find('.view-mode').hide();
    $(e.target).find('.edit-mode').show();
  }
});

待办事项模板

<script type='text/template' id='todo-template'>
  <div class='view-mode'>
    <input 
      type='checkbox'
      data-id='<%= id %>'
      <% if (completed) { %>checked<% } %>
    >
    <%= title %>
    <a data-bypass class='remove-todo' data-id='<%= id %>'>&times;</a>
  </div>
  <div class='edit-mode'>
    <p>Edit Mode</p>
  </div>
</script>

【问题讨论】：

标签： javascript backbone.js backbone-events

【解决方案1】：

e.target 指的是发生事件的节点。 Event propagation 表示这可能是您的处理程序附加到的节点的后代。

要获取事件处理程序附加到的节点，请使用e.currentTarget。

见Event.currentTarget on MDN。

【讨论】：