27

I am experiencing problem with Firefox 32 when I bind action on click event of span element inside a button element. Other browsers seems to works well.

Here the code illustrating the issue on jsFiddle.

<span onClick="alert('test');">**Working**</span><br>
<button>inside a button <span onClick="alert('test');">**Not working**</span></button>

Does anybody know why and if it's a bug or a feature ?

Brian Tompsett - 汤莱恩
  • 5,438
  • 68
  • 55
  • 126
Jrmi
  • 273
  • 1
  • 3
  • 5
  • 1
    Its funny because it works fine on Chrome. But I'm told it also doesn't work on IE so mostly it doesn't work. – chowey Nov 28 '16 at 21:33

4 Answers4

40

You have to add the pointer-events property to the span element.

button span {
  pointer-events: none;
}
informatik01
  • 15,636
  • 10
  • 72
  • 102
marco-s
  • 553
  • 4
  • 6
  • Works for me on FF 66. For some discussion see https://css-tricks.com/slightly-careful-sub-elements-clickable-things/ – Brian Burns Apr 05 '19 at 16:07
  • This should've been the accepted answer. It works even on chrome.(in 2022) – Sam Apr 04 '22 at 14:37
30

As far as i known clicking the children elements won't work because it is nested inside a button. A button is not container for child elements - only for text.

If you try like below it always tell that you clicked the button.

<button type="button" onclick="alert('You clicked the button!');">
   inside a button <span onClick="alert('clicked span');">**Not working**</span>
</button>

So, my suggestion is to use another span or a div

<div class="button_replace">
  inside a div <span onClick="alert('clicked span');">**working**</span>
</div>

Hope it helps...

Note: Your code will work in chrome but not in firefox and my answer is alternative solution for making work in firefox

wscourge
  • 9,289
  • 12
  • 51
  • 72
SDK
  • 1,482
  • 1
  • 15
  • 29
5

Add a pointer-event to your button in css like:

button span {
    pointer-events: none;
}

Clicks on the button element will be ignored

Jamel Toms
  • 4,342
  • 2
  • 25
  • 26
Jasper Seinhorst
  • 1,046
  • 6
  • 19
3

Working
inside a button Not working

What you actually want to do here is have a click event on the button - always the button, as that is the native HTML element and has built in accessibility for all.

The reason your button click won't fire if you click on something wrapped in a span (or or etc) inside a button is because you are listening for a click on event.target (what's actually clicked) and not on event.currentTarget.

If you want to listen to the button click itself (a click anywhere inside the button, including the span) you would use something like this:

HTML: 

<button type="button" class="jsAlertOnClick">
  Inside a button 
  <span onClick="alert('Span Clicked, and...');">I'm in a span</span>
</button>

Javascript:

const myButton = document.querySelector('.jsAlertOnClick');

function handleBtnClick(event) {
  const btn = event.currentTarget;
  window.alert(btn + 'has been clicked!');
}

myButton.addEventListener('click', handleBtnClick);

If you click on the span, that alert will fire first, followed by the button one. If you click elsewhere in the button, only that alert will fire.

Grace Snow
  • 31
  • 1