Is there a way to prevent an event to be triggered based on a condition?

Question

I am building a ReactJS App and I have a function that is called after a click, however I want this click event to be triggered only if the screen width is larger than 1200px.

For example, in the code below I have an onClick event added to the subContainer element, I'd like to prevent this onClick to be triggered if the screen width is smaller than 1200px.

Is there a way to do that without using a listener?

I know I could use a listener and set a condition to determine whether this event would be listened or not; I also know that I could set the condition within the function and prevent the logic to be executed; and I also could create two different JSX elements (one without the event) and render one or another based on my condition. But what I want is to keep the onClick on the element (without addEventListener) and prevent it to be triggered

It would be something like that: <div screenWidth > 1200 ? onClick="..." : null>Test</div>. Of course, this doesn't work.

Is this possible?

P.S. Remember, I am using React, this code is just an example.

const test = () => {
  console.log('Test')
}

.subContainer {
  width: 100px;
  height: 20px;
  background-color: red;
  color: white;
  text-align: center;
  cursor: pointer;
}

<div class="container">
  <div class="subContainer" onClick="test()">Test<div>
</div>

Maybe something like `onClick={window.screen.width > 1200 ? test() : () => console.log('Not true')}` or inside your test function `if(window.screen.width > 1200) do stuff` — Ameer, Jul 17 '21 at 15:37
Yes, I could do that. But what I want is to prevent the event to be triggered and not change what will be called. — Berg_Durden, Jul 17 '21 at 15:39
I think this answer: https://stackoverflow.com/a/68421971/10213537, may be the better solution, where condition is `window.screen.width > 1200` — Ameer, Jul 17 '21 at 15:42

Tushar Shahi · Accepted Answer · 2021-07-17T15:45:01.510

2

Maybe this:

import "./styles.css";

export default function App() {
  console.log(window.screen.width);
  let myCondition = window.screen.width > 1200;
  console.log(myCondition);
  const clickThis = () => {
    console.log("hello");
  };

  return (
    <div className="App">
      <button
        onClick={ myCondition ? clickThis : null}
      >
        Hello CodeSandbox
      </button>
    </div>
  );
}

Also, apparently it is window.screen.width not window.screenWidth.

Codesandbox

edited Jul 17 '21 at 15:45

answered Jul 17 '21 at 15:39

Tushar Shahi

16,452
1
18
39

I see that if `myCondition` is false the function won't be called, but wouldn't the `event` being triggered anyway? – Berg_Durden Jul 17 '21 at 15:44
1

Sorry, i was trying out multiple ways. Revised to my first answer. Nothing gets triggered this way. – Tushar Shahi Jul 17 '21 at 15:45

score 1 · Answer 2 · answered Jul 17 '21 at 15:42

1

You can use a hook to listen to window size and pass the function based on the width inside onClick

function App() {
  const size = useWindowSize();
  return (
    <div class="container">
      <div class="subContainer" onClick={size.width > 1200 ? test : null}>
        Test
      </div>
    </div>
  );
}

Here is a link to simple useWindow hook

answered Jul 17 '21 at 15:42

sathya reddy

707
3
11

The OP wants screen width, which is a different property from window.innerWidth and innerHeight, the `useWindowSize` hook is unecessary because screen width doesn't change. – Ameer Jul 17 '21 at 15:44
I have no problems getting the screen or window width, I just need to know if this `null` prevent the event to be triggered? – Berg_Durden Jul 17 '21 at 15:45

score 1 · Answer 3 · answered Jul 17 '21 at 15:47

1

According to this post setting an attribute to false causes react to omit it from the HTML which may cause the event from not being called to begin with, so perhaps using onClick={window.screen.width > 1200 ? function() : false} is the best method.

answered Jul 17 '21 at 15:47

Ameer

1,980
1
12
24

Is there a way to prevent an event to be triggered based on a condition?

3 Answers3