CODEWITHSUNDEEP
javascripthtmlcssreactjs
PTN
PTN

Reputation: 1692

Mouse pointer cannot detect element to trigger onClick()

From the snippet below, you can see that there are 2 Box components that are "underneath" the BigBox component, hence the mouse cannot detect them to trigger onClick(). Is there a way for the mouse to detect those 2 components.

I understand that you can just render the BigBox component first then Box like what I did with the <Box id="yes onClick"> component

However, for the project I'm working on, I specifically need to render a <Box>-like component first then a <BigBox>-like component.

const boxStyle = {
  position: "absolute",
  border: "1px #999 solid",
  borderRadius: "10px",
  textAlign: "center",
}

const Box = (props) => {
  return ( 
    <div style = {{ ...boxStyle, left: props.left, top: props.top, height: 50, width: 50 }} 
    onClick = {() => console.log("clicked")} > { props.id } </div>
  );
};

const BigBox = (props) => {
  return ( 
    <div style = {{ ...boxStyle, left: props.left, top: props.top, height: 200, width: 200 }}> Big Box </div>
  );
}

const App = () => {
  return (
    <div > 
      <Box id="no onClick 1" left={40} top={50}></Box>
      <Box id="no onClick 2" left={80} top={100}></Box>
      <BigBox left={10} top={10}></BigBox>
      <Box id="yes onClick" left={150} top={150}></Box>
    </div>

  );
};

ReactDOM.render( <App/> ,
  document.getElementById('root')
);
<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Upvotes: 0

Views: 113

Answers (1)

user2953241
user2953241

Reputation: 365

Option 1 - pointer-events

You can set the CSS Property pointer-events of the BigBox style to none.

const boxStyle = {
  position: "absolute",
  border: "1px #999 solid",
  borderRadius: "10px",
  textAlign: "center",
}

const Box = (props) => {
  return ( 
    <div style = {{ ...boxStyle, left: props.left, top: props.top, height: 50, width: 50 }} 
    onClick = {() => console.log("clicked")} > { props.id } </div>
  );
};

const BigBox = (props) => {
  return ( 
    <div style = {{ ...boxStyle, pointerEvents: 'none', left: props.left, top: props.top, height: 200, width: 200 }}> Big Box </div>
  );
}

const App = () => {
  return (
    <div > 
      <Box id="no onClick 1" left={40} top={50}></Box>
      <Box id="no onClick 2" left={80} top={100}></Box>
      <BigBox left={10} top={10}></BigBox>
      <Box id="yes onClick" left={150} top={150}></Box>
    </div>

  );
};

ReactDOM.render( <App/> ,
  document.getElementById('root')
);
<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Option 2 - z-index

Another solution would be to set the z-index of you Boxes to something bigger than the z-index of the BigBox component. That way the BigBox can still receive pointer events.

Option 3 - Use the layout hierarchy

Probably the most idiomatic way would be, to put your boxes inside BigBox.

Upvotes: 1

Related Questions