Backbone 事件并不总是发生在 `el`

Question

到目前为止，我正在开发我自己的 Backbone TodoMVC App. Here's my code 版本。

The Backbone events hash allows us to attach event listeners to either el-relative custom selectors, or directly to el if no selector is provided. An event takes the form of a key-value pair 'eventName selector': 'callbackFunction' and a number of DOM event-types are supported, including click, submit, mouseover, dblclick and more.

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>

Answer 1

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

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

见Event.currentTarget on MDN。

Backbone 事件并不总是发生在 `el`

Backbone event doesn't always happen on `el`

javascript

backbone.js

backbone-events