Click event on select doesn't work on macs

Question

I have a <select> that would like to respond to a click event (using javascript). On MacOS Chrome, no event is fired on click. This is a known problem (e.g. 1, 2, …)

Example

<select id='hodor'>
    <option>Jon Snow</option>
    <option>Joffrey</option>
</select>

and

$('#hodor').on('click change', function (e) {
    $(this).after("<li>"+e.type+"</li>");
});

I already know that I can use the change event (which I already do use). However the behavior is different for the end user and I need to make it work accurately: as soon as my select is clicked, I would like my UI to do something — not only when the selected option is changed.

What are my alternatives?

Kindly note: this is not a duplicate of other questions which allow for a "use the change event" answers. That's not what I am asking.

Is it just click or does the mouseup event have the same issue? — Ma3x, Jul 15 '13 at 15:28
mouseup is broken too, mousedown works even though it's slightly different. — Sklivvz, Jul 15 '13 at 15:39
I've also tried to wrap it in a `div` or `span` but the select eats all the `click` and `mouseup` events... — Sklivvz, Jul 15 '13 at 15:49

score -1 · Answer 1 · answered Jul 15 '13 at 15:28

-1

Use the mousedown event:

$('#hodor').on('mousedown', function (e) {
    $(this).after("<li>"+e.type+" " + $("option:selected", this).val() + "</li>");
});

Note that this fires before the user can select another option in the menu -- .val() returns the current value. I tried using mouseup, but that didn't fire.

FIDDLE

answered Jul 15 '13 at 15:28

Barmar

741,623
53
500
612

1

I didn't downvote but I think your answer is incomplete: how do I use the mousedown event to emulate the click event? – Sklivvz Jul 15 '13 at 15:42
1

It's not the same though... the event is fired differently. – Sklivvz Jul 15 '13 at 15:48
It's the closest I could come up with. It fires when you click on the menu, not when you let go. – Barmar Jul 15 '13 at 15:51

Click event on select doesn't work on macs

1 Answers1