A web-page contains many elements and the task is to click anywhere on the page except one element using jQuery. There are two methods to solve this problem which are discussed below:
Approach 1:
- This approach calls a function when a click event happens.
- First check the id of the targeted element and return the function if it matches.
- Else, perform some operation to let them know that somewhere is clicked.
Example: This example implements the above approach.
html
<head> <script src= </script> <style> body { height: auto; } #t { height: 100px; width: 350px; text-align:justify; } </style> </head> <body> <h1 style="color:green;"> neveropen </h1> <p id="GFG_UP"> </p> <textarea id="t"> jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms, jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser JavaScript development. </textarea> <br> <button onclick="gfg_Run()"> click here </button> <p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;"> </p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); el_up.innerHTML = "Click anywhere on the body " + "except textarea to see effect."; $('body').click(function(event) { if(event.target.id == "t") return; if($(event.target).closest('t').length) return; el_down.innerHTML = "Clicked on the " + "body except textarea."; }); </script> </body> |
Output:
How to click anywhere on the page except one element using jQuery ?
Approach 2:
- This approach calls a function when any click event happens.
- If it is other HTML element then do nothing.
- Else, use event.stopPropagation() method to stop the event from occurring.
Example: This example implements the above approach.
html
<head> <script src= </script> </head> <body> <style> body { height: auto; } #t { height: 100px; width: 350px; text-align:justify; } </style> <h1 style="color:green;"> neveropen </h1> <p id="GFG_UP"> </p> <textarea id="t"> jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms, jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser JavaScript development. </textarea> <br> <button onclick="gfg_Run()"> click here </button> <p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;"> </p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); el_up.innerHTML = "Click anywhere on the body" + " except textarea to see effect."; $('html').click(function() { el_down.innerHTML = "Clicked on the body" + " except textarea."; }); $('#t').click(function(event) { event.stopPropagation(); }); </script> </body> |
Output:
How to click anywhere on the page except one element using jQuery ?
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
