score:2

Accepted answer

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

score:3

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.


Related Query

More Query from same tag