I have a button with onClick event attached to it:

<button id="my-button" onClick={myMethod}>
   My button
</button>

I have also added an event listener to this button:

const listener = (e) => {
   // Do something here (or elsewhere) to prevent `myMethod` from being invoked
   console.log('Hello, world!');
}
const options = { capture: true, once: true };
document.getElementById('my-button')
   .addEventListener('click', listener, options);

Is it possible to add some method inside the listener, so the myMethod is stopped from being invoked?

I have a button with onClick event attached to it:

<button id="my-button" onClick={myMethod}>
   My button
</button>

I have also added an event listener to this button:

const listener = (e) => {
   // Do something here (or elsewhere) to prevent `myMethod` from being invoked
   console.log('Hello, world!');
}
const options = { capture: true, once: true };
document.getElementById('my-button')
   .addEventListener('click', listener, options);

Is it possible to add some method inside the listener, so the myMethod is stopped from being invoked?

• javascript
• reactjs

• have you tried event.preventDefault(); ? – Phelipe Rocha Commented Sep 2, 2018 at 12:18
• Is myMethod your code? – Anthony Commented Sep 2, 2018 at 12:18
• 3 you should not mix react and plain js handlers. that just creates chaos. – Jonas Wilms Commented Sep 2, 2018 at 12:19
• 2 @AbSin - reactjs/docs/handling-events.html – T.J. Crowder Commented Sep 2, 2018 at 12:23
• 1 @abSin Cause onClick is part of React <button />s props, it doesnt get reflected to the DOM. – Jonas Wilms Commented Sep 2, 2018 at 12:24

1 Answer 1

Combining React event handling and raw DOM event handling usually indicates a larger design issue. Having the one conflict with the other even more so. :-)

Having said that, React's event handlers use delegation, so the standard e.stopPropagation should do it:

const listener = (e) => {
    e.stopPropagation();
    console.log('Hello, world!');
};

Example:

function myMethod() {
    console.log("myMethod");
}
const Example = () => <button id="my-button" onClick={myMethod}>
    My button
</button>;

ReactDOM.render(
  <Example />,
  document.getElementById("root")
);

const listener = (e) => {
   // Do something here (or elsewhere) to prevent `myMethod` from being invoked
   e.stopPropagation();
   console.log('Hello, world!');
}
const options = { capture: true, once: true };
document.getElementById('my-button')
   .addEventListener('click', listener, options);

<div id="root"></div>

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

Note that you'll need to re-attach your event handler every time React re-renders the ponent. This is part of why mixing these two systems is generally not your best approach.