How to click anywhere on the page except one element using jQuery ? Last Updated : 24 Jan, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report 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= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <style> body { height: auto; } #t { height: 100px; width: 350px; text-align:justify; } </style> </head> <body> <h1 style="color:green;"> GeeksforGeeks </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= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> </head> <body> <style> body { height: auto; } #t { height: 100px; width: 350px; text-align:justify; } </style> <h1 style="color:green;"> GeeksforGeeks </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 ? Comment More infoAdvertise with us Next Article How to hide all heading elements on a page when they are clicked in jQuery ? P PranchalKatiyar Follow Improve Article Tags : JQuery jQuery-Questions Similar Reads How to find the class of clicked element using jQuery ? In this article, we will find the class of the clicked element using jQuery. To find the class of clicked element, we use this.className property. The className property is used to set or return the value of an element’s class attribute. Using this property, the user can change the class of an eleme 1 min read How to hide all heading elements on a page when they are clicked in jQuery ? In this article, we will see how to hide all heading elements on a page when they are clicked in jQuery.Here we have two common approaches. Using slideUp() methodUsing hide() method Approach 1: Using slideUp() method To hide all heading elements from the page, we use slideUp() method. First, we use 2 min read How to Delete All Table Rows Except First One using jQuery? To delete all table rows except the first one using jQuery, you can target the rows and remove them while keeping the first row intact.ApproachFirst, we create a table using <table> tag and add a button containing btn id. When a user clicks on the button, then the jQuery function is called. Th 1 min read How to remove parent element except its child element using jQuery ? Given an HTML document and the task is to remove the parent element except for its child element. Approach 1: Use contents() method to select all the direct children, including text and comment nodes for the selected element.Selected elements are stored in a variable.Now, use replaceWith() method to 2 min read How to disable right-click option using the jQuery ? The bind() method in jQuery is used to attach one or more event handlers for selected element and this method specifies a function to run when an event occurs. Syntax: $(selector).bind(event, data, function);Parameters: This method accepts three parameters as mentioned above and described below: eve 2 min read How to perform click-and-hold operation inside an element using jQuery ? Given an HTML element and the task is to click and hold an element in a document for a few seconds to perform the operation using jQuery. Approach: Select an HTML element. Add the event listener to that element and add a timeOut timer for that event. If that event happens to active for few seconds t 3 min read Like