2012-04-09 1 views
3

Учитывая следующий простой HTML:Backbone Просмотр событий получение правильной цели

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

И следующий вид Backbone:

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

Это работает, очевидно, но я не уверен, что это хороший код для написания везде. Я мог бы сделать метод, который мог бы просто позвонить, но я не уверен, что на самом деле исправляет запах кода, он просто передает его в другое место.

ответ

9

Вы можете использовать evt.currentTarget вместо:

Текущий DOM элемент в пузырьковой фазы событий.

Демо: http://jsfiddle.net/ambiguous/UgA5M/

Или вы могли бы использовать $container = $(evt.target).closest('.someContainer') и не беспокоиться о вложенности.

Демо: http://jsfiddle.net/ambiguous/B49LG/

Какой подход вы используете, зависит от вашей конкретной ситуации. Если у вас есть обработчик клика на каком-то элементе управления, то closest может иметь больше смысла; если вы действительно хотите, чтобы элемент, связанный с вашим обработчиком кликов (или, по-вашему, this is all based on delegate), затем используйте currentTarget.

+1

Вы, безусловно, правы ... Это полностью проскользнуло:/Спасибо! –