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, Jan 19 '20 at 06:05
I dropped your code into a [codesandbox](https://codesandbox.io/s/romantic-solomon-bi2pi?fontsize=14&hidenavigation=1&theme=dark) 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, Jan 19 '20 at 06:07
Does this answer your question? [React Synthetic Event distinguish Left and Right click events](https://stackoverflow.com/questions/31110184/react-synthetic-event-distinguish-left-and-right-click-events) — Emile Bergeron, Jan 19 '20 at 06:18

Vectrobyte · Answer 1 · 2020-01-19T06:24:16.230

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.

I need to achieve using onRightClick – soubhagya pradhan Jan 19 '20 at 06:15 — soubhagya pradhan, Jan 19 '20 at 06:15
And can you please convert it to class based component – soubhagya pradhan Jan 19 '20 at 06:15 — soubhagya pradhan, Jan 19 '20 at 06:15
I've added that too, check it out – Vectrobyte Jan 19 '20 at 06:22 — Vectrobyte, Jan 19 '20 at 06:22

score 2 · Accepted Answer · answered Jan 19 '20 at 06:11

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>
    )
}

Done using onContextMenu – soubhagya pradhan Jan 19 '20 at 06:18 — soubhagya pradhan, Jan 19 '20 at 06:18

How to prevent outer function call in reactjs

2 Answers2