Home/ Questions/Q 9163385
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T14:26:05+00:00

I have a custom class called masked on the body tag. In the middle

  • 0

I have a custom class called masked on the body tag. In the middle of the page, I have a DIV with about 50% width and height of the page.

I am trying to attach a click handler only to the body.masked selector, but the problem is that whenever the inner DIV is clicked, the click handler on that body.masked selector is also fired.

As if the DIV in the middle is “transparent”. How do I avoid that?

Here’s some code:

$('body.masked').click(function(){
  alert();
})

And HTML:

<body class="masked">
  <div style="width:50%;height:50%;text-align:center;>Lorem ipsum</div>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It is because of event bubbling.

    It makes an event happened in a child element to bubble to the top of the event tree. That is why it is happening.

    In the event handler you can check the e.target value to check where there event had occured.

    ex:

    $('.top').on('click', function(e){
    console.log(e, e.currentTarget, e.target, this);
    if($(e.target).is(this)){
        console.log('proceed')
    }
})

    Fiddle

    • 0