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

Issue

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

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%

Solution

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

Answered By - Rajaprabhu Aravindasamy