主干视图事件获取正确的目标

Question

给定以下简单的html：

<div class="someContainer">
  <h5>Some other information</h5>
</div>

以及以下骨干视图：

var view = Backbone.View.extend({
  events: {
   'click .someContainer': performAction
  },
  performAction: function (evt) { 
    // Do things here
  } 
});

我发现自己在做以下代码很多，这对我来说似乎是一种代码气味。是我做错了什么，还是有更好的方法

？

...performAction: function (evt) { 
 // Check to see if the evt.target that was clicked is the container and not the h5 (child)
 if ($(evt.target).hasClass('someContainer')) { 
  // Everything is ok, the evt.target is the container
 } else { 
  // the evt.target is NOT the container but the child element so...
  var $container = $(evt.target).parent('.someContainer');
  // At this point I now have the correct element I am looking for
 }
}

这显然有效，但我不确定这是在任何地方编写的好代码。我可以制作一个我可以调用的方法，但我不确定它是否真的纠正了代码异味，它只是将其外包到其他地方。

Answer 1

你可以

改用evt.currentTarget：

事件冒泡阶段中的当前 DOM 元素。

演示：http://jsfiddle.net/ambiguous/UgA5M/

或者您可以使用$container = $(evt.target).closest('.someContainer')而不用担心嵌套。

演示：http://jsfiddle.net/ambiguous/B49LG/

使用哪种方法取决于您的具体情况。如果您在某种控件上具有单击处理程序，则closest可能更有意义;如果您确实想要将单击处理程序绑定到的元素（或者认为您拥有，这毕竟是基于delegate），请使用 currentTarget 。