How to prevent outer function call in reactjs

Question

Here is my react Code.

OuterOne = () => { alert("outer calling") } InnerOne = (ev) => { ev.stopPropagation() alert("here") console.log(ev.target) } <div onRightClick={()=>this.OuterOne()}> Outer <br/> <div onRightClick={(ev)=>this.InnerOne(ev)} style={{ margin:"10px" }}> INner </div> </div>

I have two functions.

One is Inner and another is Outer . When i am calling Inner it calling the outer function because Inner div is wrapped inside outer div.

I wants to call only inner when i am clicking inner and outer function when clicking outer div.

The same i tested with javascript it is working, but not working with react.js

Is there any way to achive this ?

Please have a look.

onRightClick is not recognized as an event handler in react. — Ajay Dabas
– Ajay Dabas, Commented Jan 19, 2020 at 6:05
I dropped your code into a codesandbox and it seems to work as you expect (after fixing the click handler). Is there a way you can proved a working sandbox or demo that reproduces your issue? — Drew Reese
– Drew Reese, Commented Jan 19, 2020 at 6:07
Does this answer your question? React Synthetic Event distinguish Left and Right click events — Emile Bergeron
– Emile Bergeron, Commented Jan 19, 2020 at 6:18

Vectrobyte · Accepted Answer · 2020-01-19 06:24:16Z

It's working perfectly fine.

import React from 'react'; const App: React.FC = () => { const OuterOne = (e) => { e.preventDefault(); e.stopPropagation(); alert('outer calling'); }; const InnerOne = (e) => { e.preventDefault(); ev.stopPropagation(); alert('here'); console.log(e.target); }; return ( <div> <div onContextMenu={OuterOne}> Outer <br /> <div onContextMenu={InnerOne} style={{ margin: '10px' }} > Inner </div> </div> </div> ); }; export default App;

Here's on on the class based component:

import React from 'react'; class App extends React.Component{ OuterOne = (e) => { e.preventDefault(); e.stopPropagation(); alert('outer calling'); }; InnerOne = (e) => { e.preventDefault(); e.stopPropagation(); console.log(e.button); alert('here'); console.log(e.target); }; render() { return ( <div> <div onContextMenu={this.OuterOne}> Outer <br /> <div onContextMenu={this.InnerOne} style={{ margin: '10px' }} > Inner </div> </div> </div> ); } } export default App;

Just use onContextMenu instead of onRightClick.

Here, check it out, it's in class based example.

Bilal Hussain · Accepted Answer · 2020-01-19 06:11:43Z

As stated by Ajay Dabas the onRightClick is not recognized i edited and used onClick handler and it works fine

OuterOne = () => { alert("outer calling") } InnerOne = (ev) => { ev.stopPropagation() alert("here") console.log(ev.target) } render() { return ( <div onClick={() => this.OuterOne()}> Outer <br /> <div onClick={(ev) => this.InnerOne(ev)} style={{ margin: "10px" }}> INner </div> </div> ) }

Collectives™ on Stack Overflow

How to prevent outer function call in reactjs

2 Answers 2

3 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Linked

Related