如何使用 React onClick 防止 href 触发？

Question

trying to make a link element ( <a> element) with href . Why am I using href and not changing history ? because I want the option to open in a new tab in browser.

The Problem is, I have a button inside the element, and when you click on it, it triggers the href immediately, before even getting to stopProppagation or preventDefault inside the onClick handler of the button. It's like 2 different event types…

something like this:

...
const onButtonClick = (event) => {
    event.stopPropagation();
    event.nativeEvent.stopImmediatePropagation();
    event.preventDefault();
    if (clickDisabled) return;
    if (!onClick) return;
    onClick(event);
}

return (
    <a href={someHref}>
        <button onClick={onButtonClick}>open menu</button>
    </a>
)

Any ideas?

Answer 1

The workaround I ended up using: instead of the button onClick - I used onMouseDown which happens before the href trigger. Not the best solution, but was good enough in my case.

Answer 2

const onButtonClick = (event) => {
    event.stopPropagation();
    event.nativeEvent.stopImmediatePropagation();
    if (clickDisabled) return;
    if (!onClick) return;
    onClick(event);
}


const handleLink = (e) => {
    e.preventDefault();
    window.open('https://URL...', '_blank');
  }

   return (
    <a href={someHref} onClick={handleLink}>
        <button onClick={onButtonClick}>open menu</button>
    </a>
)