difference between having a click handler on a button or on it's parent?-CodePudding

Between

<button onClick={...}>Click me</button>

and

<span onClick={...}>
  <button>Click me</button>
</span>

are there any differences for the user? I know that the click event will always bubble up to the span element, but are there any accessibility issues or unintended consequences that could arise from this?

CodePudding user response：

There is a massive difference!

If you tab to a <button> so it is focused you can activate it using Enter and it will activate the click handler. It will not do this with a <span> (even if you add tabindex="0" to the <span> so it is focusable).

Also having a click handler on a <span> around a <button> will cause issues as you then have nested active elements. This means that when you click on the <button> that is within a <span> there is no way of knowing which element is supposed to fire an event (is it the <span> click handler or the <button> click handler?)

The question is, why do you want to attach the handler to the <span> as it may be that there is a better way to do what you are attempting. Let me know and I will see if I can help you structure things better / work around the problem!

CodePudding user response：

since your question is about accessibility, you sure shouldn't do this because you have a native element for "clicking things" in HTML, but if you insist you can make a span work as a button by:

adding the role='button' attribute
handle the aria-pressed attribute value
define a value for tabindex attribute.

if you didn't do this the screen readers users will have a difficult time in your website

this link contains an example how button can be considered a div with extra attributes: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role

CodePudding user response：

In that setup, you should be fine. If however you had a <span> inside of the <button>, then that's when you'll run into issues because a button should not contain children elements, only the value.

<button type="button" onclick="alert("Yo");"></button> = works

<button type="button"><span onclick="alert("Yo");"></button> = fails

And then I believe Firefox handles these events differently to Chrome, but the latest builds should be ok.

CodePudding user response：

when you call the onclick on span you dont need to use event.preventDefault. but when you use button or a you need to use event.preventDefault. that the basic difference

CodePudding user response：

Why do you need the button element? Just use <span onclick="onClick()> You can style the span with css. Personally I think button is redundant.