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

Question

我正在开发自己的Backbone TodoMVC App版本。 到目前为止，这是我的代码 。

---

Backbone事件哈希允许我们将事件侦听器附加到el相对的自定义选择器， 或者如果未提供选择器，则直接附加到el 。 事件采用键值对“ eventName selector”的形式：“ callbackFunction”，并且支持许多DOM事件类型，包括单击，提交，鼠标悬停，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>

Answer 1

e.target是指事件发生的节点。 事件传播意味着这可能是您的处理程序附加到的节点的后代。

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

请参阅MDN上的Event.currentTarget 。