Firefox addeventlistner('mouseover',...) on

Question

The following javascript successfully trigger alert on <button> element for Chrome but not Firefox; with Firefox, alert is not triggered:

element.addEventListener('mouseover', function(){ alert('mouseover') }, false);

When I replace element html to <span>, the event triggers the expected alert in Firefox, as expected.

Offending html:

not working html

<button id="button-upload"><span>upload</span></button>

working html

<span id="button-upload"><span>upload</span></span>

In firefox, do events not bubble to buttons from children?

If so, is there a workaround - other than replacing button with span due to css.

Might be helpful http://stackoverflow.com/questions/8187854/jquery-event-bubbling-on-button-not-working-as-expected-in-firefox — Harsha Venkataramu, Sep 05 '13 at 20:46

score 1 · Accepted Answer · answered Sep 05 '13 at 21:28

1

Could you do this instead?

html:

<div><button id="button-upload"><span>upload</span></button></div>

javascript:

document.getElementById('button-upload').parentNode.addEventListener('mouseover', function(){ alert('mouseover') }, false);

answered Sep 05 '13 at 21:28

Joon

1

`
` works even better :), no js change thanks! – Rich Tier Sep 05 '13 at 21:43

Firefox addeventlistner('mouseover',...) on not work