骨干事件并不总是发生在`el`上

Question

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

---

  

Backbone事件哈希允许我们将事件侦听器附加到el-relative自定义选择器，如果没有提供选择器，则直接附加到el 。事件采用键值对＆＃39; eventName选择器＆＃39;：＆＃39; callbackFunction＆＃39;并且支持许多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();
  }
});

todo模板

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