CODEWITHSUNDEEP
htmljquerycsseventsjquery-events
Yanker
Yanker

Reputation: 302

How to make specific areas in a div clickable with css / js / anything

I'd like to show you an image of my page content so you'd understand what am I talking about:

enter image description here

Now, I have two main divs on a page: the wrapper (the red one) and the purple:

<div id="purple" style="position:fixed; z-index:0; left:0; top:0; width:100%; height:100%; filter:alpha(opacity=50); opacity:0.5; cursor:pointer;" onclick="javascript:alert('purple clicked');"></div>
<div id="wrapper"></div>

The wrapper contains many controls and other divs, and the purple is basically supposed to be clickable and perform some event, lets say alert('purple clicked');

The thing is that when I press inside the wrapper it also fires the purple event. So what I did was to add the following code:

<script type="text/javascript">

    $("#purple").click(function (e) 
    {            
        window.event.cancelBubble = true;            
        e.stopPropagation();
    })

</script>

I understood that through this code I'll manage to click on the purple area and get the alert fire, the problem is that when I click inside the red area this alert is fired also - and this is not what I wanted!

So, eventually, if you haven't given up yet reading this post, here's the question:

How to avoid the "purple events" fire when clicking the red zone?

p.s.
I must have the purple div be like - this can't be changed:

width:100%; height:100%

Upvotes: 1

Views: 4942

Answers (3)

Max Novich
Max Novich

Reputation: 1169

This should solve your problem:

CSS

#wrapper
{
    z-index:1;
    margin: 0 -50px;
    left:50%;
    position:absolute;
}

Fiddle

You have a problem because your purple div overlays the red one, the reason for that is:

z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

you should read more about it Z-index

Upvotes: 2

zamnuts
zamnuts

Reputation: 9582

Note: Just realized your purple div does not encapsulate red/green divs. This answer won't solve your problem in that case. It relies on the nested div structure as per the included example below. I'll leave this answer in case someone else comes across it with a similar issue. Maksym Stepanenko's answer below regarding z-index is the most correct one.

There are two properties of the event object: currentTarget and target.

  • currentTarget is the current element in the event bubbling phase.
  • target is the element that is responsible for initiating the event.

Within the purple click event handler you could test to see if that element was the target in the event chain:

$('#purple').click(function(e) {
    if ( e.currentTarget == e.target ) {
        console.log('clicked purple',Date.now());
    }
});
$('#red').click(function(e) {
    console.log('clicked red',Date.now());
});

This is helpful when:

  • you don't want to constrain the event phasing to only the red object
  • you don't want to have to remember to put e.stopPropagation in every click handler whose element is a child of #red/#purple

Here's a complete working example:

<!doctype html>
<html>
    <head>
        <title>Bubble Test</title>
        <style type="text/css">
            #purple {border:3px solid #3c1e40;background:#b459bf;}
            #red {margin:auto;width:958px;border:3px solid #400Aa0a;background:#ff2829;}
            .green {margin:20px;padding:30px;border:3px solid #1c401c;background:#54bf55;}
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#purple').click(function(e) {
                    if ( e.currentTarget == e.target ) {
                        console.log('clicked purple',Date.now());
                    }
                });
                $('#red').click(function(e) {
                    console.log('clicked red',Date.now());
                });
            });
        </script>
    </head>
    <body>
        <div id="purple">
            <div id="red">
                <p class="green">Hello World</p>
                <p class="green">Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
    </body>
</html>

You could take this a step further and also compensate for #red:

$('#purple').click(function(e) {
    if ( e.currentTarget == e.target ) {
        console.log('clicked purple',Date.now());
    }
});
$('#red').click(function(e) {
    if ( e.currentTarget == e.target ) {
        console.log('clicked red',Date.now());
    }
});
$('.green').click(function(e) {
    console.log($(this).text(),Date.now());
});

Upvotes: 2

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

There is no direct way to prevent bubbling down. You have to use event.target.id to differentiate the purple div with others,

Try this,

$("#purple").click(function(e){
  if(e.target.id == "purple")
  {
       alert("purple clicked.!");
  } 
});

DEMO

Upvotes: 2

Related Questions