Rhono Rhono - 2 months ago 13
Javascript Question

Delegated click event not firing on descendants

I have a view that is a

<select>
that has a method I want called whenever a
click
event happens on it or an
<option>
.

The view looks like this:

mySelect = Backbone.view.extend({
el: '.my-select',
events: {
'click': 'isSelected'
},
isSelected: function(e) {
console.log(e.currentTarget.tagName);
}
});


Currently,
isSelected()
only fires when I click on the
select
itself and not the
options
.

I've tried
'click option'
,
'click *'
, and
'click .my-select > option'
.

What am I missing?

Answer

What I'm trying to do isn't possible and the reason is entirely unrelated to Backbone! The problem is that in most browsers mouse/keyboard events do not fire on options.

From MDN:

Historically, Firefox has allowed keyboard and mouse events to bubble up from the element to the parent element. This doesn't happen in Chrome, however, although this behavior is inconsistent across many browsers.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

The SO answer that led me to MDN: onclick on option tag not working on IE and chrome