How To Make An OnClick Function Which Is Doing Nothing? (React) Trang chủ » Html Onclick Do Nothing » How To Make An OnClick Function Which Is Doing Nothing? (React) Có thể bạn quan tâm Html Original Documentation Html Original Image Size Html Original Symbol Html Original Website Html Page Download Loading How to make an onClick function which is doing nothing? (React) JavaScript kazooi December 27, 2021, 6:33pm 1 Hi there, how can we make an onClick function which is doint nothing or which prevents that an HTML element (which has an onClick open/close function) will not get triggered? In other words, I have an html overlay element which encloses all elements (login form) inside this overlay container, thats why the login form also closes when someone clicks inside the login form. But the form should just close when someone clicks outhside the login form (click on overlay), so I thought to make an onClick function which do nothing. Is this the right way to create this onClick situation or is there a better option? This is the example code: import { useState } from 'react'; export default function LoginForm() { // OPEN AND CLOSE LOGIN FORM const [login, setLogin] = useState(false); const toggleLogin = () => { setLogin(!login); return ( <> <button className="btn-login" onClick={toggleLogin}> Login </button> {login && ( <div className="overlay" onClick={toggleLogin}> <div className="login-form_container" onClick={doNothing}> <p>SOME CONTENT</p> </div> </div> )} </> ); } loginform-close-on-click_small1200×683 127 KB Sould I set useState (true) ? I am sure it is not that complicated but I still dont understand the logic Hope someone can help!! shugyoza December 27, 2021, 7:43pm 2 If I understood you correctly, you might want to try including: event.stopPropagation() in your original form function to prevent the bubbling effect to your parent container element, so that it will only react to a click inside your intended element, not outside of that element (but in its parent element). Not also sure if it also works with react too though. https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation 1 Like skaparate December 27, 2021, 8:16pm 3 Hello! You have to check that the target is the current target of the event listener: // Inside your event listener for when a user clicks on the overlay if (e.target !== e.currentTarget) { // Returning false stops the execution of the event and prevents bubbling return false; } Take a look at this example and here you can see the source code. 1 Like kazooi December 27, 2021, 9:08pm 4 Thank you for your answers, I guess that´s the solution! @skaparate the link in your answer is not working I have problems to figure out where to write the code… I guess I need to paste the event (e) as a parameter inside the () but then I need to tell the html element (which should not get triggered) that if there is a “click” execute the event, right? What attribut I can use inside the button to link to the if statement? Here again is the short code example: import { useState } from 'react'; export default function LoginForm() { // OPEN AND CLOSE LOGIN FORM const [login, setLogin] = useState(false); const toggleLogin = () => { setLogin(!login); }; return ( <> <button className="btn-login" onClick={toggleLogin}> Login </button> {login && ( <div className="overlay" onClick={toggleLogin}> <div className="login-form_container" ???attribute???> </div> </div> )} </> ); } It would be great if someone could include the if statement: // Inside your event listener for when a user clicks on the overlay if (e.target !== e.currentTarget) { // Returning false stops the execution of the event and prevents bubbling return false; } into the code, I still dont know how to handle this … 1 Like skaparate December 27, 2021, 9:15pm 5 Inside your toggleLogin, just before the setLogin should be the if I mentioned. The e, generally, stands for the event, which is the object passed to every event handler, like onClick. In other words, the toggleLogin already receives this event, you just have to declare it on the function parameters. PD: I tested the links and they’re working, but here’s the code anyway: import React, { useState } from 'react'; import './App.css'; function LoginForm(props) { const [showLogin, setShowLogin] = useState(false); function toggleLogin(e) { console.log('Event:', e); if (e.target !== e.currentTarget) { return false; } e.nativeEvent.stopImmediatePropagation(); setShowLogin(!showLogin); } function doLogin() { console.log('Attempting to login'); } let form = null; if (showLogin) { form = ( <div className="overlay" onClick={toggleLogin}> <div className="login"> <p>If you click anywhere outside of the gray area, the modal will close.</p> <label>User: <input type="text" /></label> <label>Pass: <input type="password" /></label> <button onClick={doLogin}>Enter</button> </div> </div> ); } return (<div> <p>Click on the following button to display the modal:</p> <button onClick={toggleLogin}>Login</button> {form} </div>); } function App() { return ( <main> <LoginForm /> </main> ); } export default App; 1 Like Sylvant December 27, 2021, 9:33pm 6 i dont completely understand the desing you are after, but i think i worked on something similar. You can use the events onMouseEnter & onMouseLeave on the form and make them affect a boolean value which tells whether the mouse is over the form or not. The on click event of the overlay should have access to the boolean which tells if the mouse is over the form. If its over, it shouldnt to anything, if its not over the element, it should close the form. PS: i think it would be appropriate to store the boolean inside a ref container(useRef()), to preserve value between renders. You should not store it as state because it would rerender components which wont be ideal for performance kazooi December 27, 2021, 9:52pm 7 @skaparate Thanks for the code example! It works exactly the way I need it. However your structure looks a little bit different then mine, so I need some time to think about the logic to be able to use it in my own code and actually learn something. Oh yes and the link is working now, i dont know what was the issue before… @Sylvant I guess that would not be the best way to do it in react, but maybe it would be a graet solution for plain Javascript. 1 Like system Closed June 28, 2022, 9:53am 8 This topic was automatically closed 182 days after the last reply. New replies are no longer allowed. Related topics Topic Replies Views Activity Do you guys see anything wrong with this code? 2 403 January 16, 2021 onClick not working in React JavaScript 4 2236 October 6, 2023 Use State to Toggle an Element - instructions JavaScript 10 1014 January 3, 2022 Using React click events - how to trigger function on click of element outside of component 4 4104 June 1, 2021 Calling onClick on the button in render method JavaScript 4 918 June 1, 2021 Từ khóa » Html Onclick Do Nothing Make A HTML Link That Does Nothing (literally Nothing) - Stack Overflow Html Href Onclick Do Nothing Code Example - Code Grepper How To Make An Anchor Tag Refer To Nothing? - Tutorialspoint Define Do Nothing To Keep User On The Same Page In JavaScript How To Make An Anchor Tag To Do Nothing? What Does Javascript:void(0) Mean? - STechies In React, How Can I Cause Anchors To Do Nothing On Click? Link Behavior - IT Accessibility - NC State University Dr Make Anchor Tag Refer To Nothing With JavaScript/jQuery Back To Basics: Non-Navigating Links For JavaScript Handling React OnClick Event Handlers: A Complete Guide - LogRocket Blog Making Actions Keyboard Accessible By Using The Onclick Event Of ... Button Type In HTML: Here's Why You Should Always Declare It »
