Activate event in jQuery when clicking on a blank area, away from any div element

Question

Activate event in jQuery when clicking on a blank area, away from any div element

I need help figuring out how to hide a div when empty space on the margins of the page is clicked, as opposed to just any area outside of the div. I've managed to achieve this functionality when certain other divs are clicked, but I'm stuck on implementing it for empty space clicks. Here's a simple jsfiddle you can use to experiment with.

Below is the basic jQuery code I am currently using. Is there a way to modify it so that clicking on empty space will make either "text1" or "text2" disappear?

$("#2").click(function() {
   $('#text1').slideUp(300);
});

$("#1").click(function() {
   $('#text2').slideUp(300);
});

javascript jquery html css click

Answer 1

Answer №1

To easily hide specific div items when clicked, you can assign a unique class to those elements and implement the following code snippet:

$(document).click(function (event) {//detect click event on document    
    if (!$(event.target).hasClass('MyClass')) {//check if clicked item does not have the specified class
        $('#text2').slideUp(300);//hide text2     
        $('#text1').slideUp(300);//hide text1      
    }      
});

Check out the demonstration: https://jsfiddle.net/tjrsvbuc/3/

Answer 2

To easily hide specific div items when clicked, you can assign a unique class to those elements and implement the following code snippet:

$(document).click(function (event) {//detect click event on document    
    if (!$(event.target).hasClass('MyClass')) {//check if clicked item does not have the specified class
        $('#text2').slideUp(300);//hide text2     
        $('#text1').slideUp(300);//hide text1      
    }      
});

Check out the demonstration: https://jsfiddle.net/tjrsvbuc/3/

Answer 3

Answer №2

I came across this elegant solution here on Stackoverflow:

$(document).mouseup(function (e)
{
    var container = $("#text1, #text2");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.slideUp(300);
    }
});

Updated Fiddle

Answer 4

I came across this elegant solution here on Stackoverflow:

$(document).mouseup(function (e)
{
    var container = $("#text1, #text2");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.slideUp(300);
    }
});

Updated Fiddle

Answer 5

Answer №3

If you're interested in adding an event in JavaScript, here's a code snippet to help you achieve that: e.stopPropagation();

$(document).ready(function(){
                $("#1").click(function(e){
                    e.stopPropagation(); 
                    $("#text1").slideDown(300);
                });
            });

$(document).ready(function(e){
                $("#2").click(function(e){
                    e.stopPropagation(); 
                    $("#text2").slideDown(300);
                });
            });

$("#2").click(function() {
                $('#text1').slideUp(300);
            });

$("#1").click(function() {
                $('#text2').slideUp(300);
            });

$("body").click(function() {
    $('#text1').slideUp(300);
    $('#text2').slideUp(300);
  });

Answer 6

If you're interested in adding an event in JavaScript, here's a code snippet to help you achieve that: e.stopPropagation();

$(document).ready(function(){
                $("#1").click(function(e){
                    e.stopPropagation(); 
                    $("#text1").slideDown(300);
                });
            });

$(document).ready(function(e){
                $("#2").click(function(e){
                    e.stopPropagation(); 
                    $("#text2").slideDown(300);
                });
            });

$("#2").click(function() {
                $('#text1').slideUp(300);
            });

$("#1").click(function() {
                $('#text2').slideUp(300);
            });

$("body").click(function() {
    $('#text1').slideUp(300);
    $('#text2').slideUp(300);
  });

Activate event in jQuery when clicking on a blank area, away from any div element

Answer №1

Answer №2

Answer №3

Similar questions

The replace function fails to recognize Cyrillic characters when combined with the /b flag

Tips for Validating Radio Buttons in Angular Reactive Forms and Displaying Error Messages upon Submission

Challenges with CSS in Google Chrome web browser (Input field and Submit button)

What is the best way to trigger a modal on Bootstrap using a JavaScript/jQuery function?

How to create a scrolling fixed div that moves horizontally and repositions to the center when the page is maximized

Patience is key as we wait for the webpage to finish loading

Unable to locate a contact within the state

Uh-oh! Angular 6 has encountered an unexpected error with template parsing

Insert DOM elements at the start of the parent element

An elegant approach to converting a JavaScript object containing key-value pairs into an array of objects, each with a single key-value pair

Exploring the capabilities of useRef in executing a function on a dynamically created element within a React/Remix/Prisma environment

Having Trouble Changing CSS with Rails Link_to CSS ID

Trouble with displaying results after submitting a form using jQuery ajax

Error: The checkbox was clicked, but an undefined property (includes) cannot be read

unable to retrieve data using ajax

Stealthy Google Recaptcha integrated with a dynamic AJAX form

Implementing Winston logging into a React JS project

Why won't the main bar column in Bootstrap extend to the entire width of the page?

What is the best way to include my PHP session variable within my JavaScript code?

Does the use of 'window.location.replace' in Chrome cause a session to be destroyed in PHP when redirecting to a specified page?