Используя представление Backbone.js, скажем, я хочу включить следующие события:
events: {
'click a': 'link',
'click': 'openPanel'
}
Как я могу избежать запуска OpenPanel, когда я нажимаю ссылку. Я хочу, чтобы у меня был щелчок, который вызывает действие, но в этом поле могут быть элементы, которые должны запускать другие действия, а не родительское действие. Подумайте, например, Twitter.com и ссылки в твитах/правой панели.
Я использовал e.stopImmediatePropagation();, чтобы предотвратить распространение события. Хотелось бы, чтобы был более короткий способ сделать это. Я хотел бы вернуть false; но это связано с моим знакомством с jQuery
Метод JQuery preventDefault также будет хорошим вариантом.
window.LocationViewLI = Backbone.View.extend({
tagName: "li",
template: _.template('<a href="/locations/<%= id %>"><%= name %></a>'),
events: {
"click a": "handleClick"
},
handleClick: function(event) {
event.preventDefault();
console.log("LocationViewLI handleClick", this.model.escape("name") );
// debugger;
},
...
Каждый из обработчиков событий будет передан объект события при его запуске. Внутри обработчика вам необходимо использовать метод jQuery event.stopPropagation(). Например:
link: function(event) {
//do some stuff here
event.stopPropagation();
}
Два других метода, которые могут работать для вас:
events: {
'click a': 'link',
'click *:not(a, a *)': 'openPanel'
}
Тогда openPanel не будет записывать события click на любом <a> или дочернем элементе <a> (если у вас есть значок в тэге <a>).
В верхней части метода openPanel убедитесь, что цель события не была <a>:
openPanel: function(event) {
// Don't open the panel if the event target (the element that was
// clicked) is an <a> or any element within an <a>
if (event && event.target && $(event.target).is('a, a *')) return;
// otherwise it safe to open the panel as usual
}
Обратите внимание, что оба этих метода по-прежнему позволяют вызывать функцию openPanel из другого места (например, из родительского представления или другой функции в этом представлении). Просто не передавайте аргумент event, и все будет хорошо. Вам также не нужно делать ничего особенного в вашей функции link - просто обработайте событие click и перейдите к нему. Хотя вы, вероятно, еще захотите позвонить event.preventDefault().
Верните "false" в свою "ссылку".