how to disable window.onclick event when "onclick" is called on a specific div?

Question

I have number of drop down menu's which gets called with a onClick event right below those specific div's,and i also have a window.onclick set inorder to retract those dropdowns(which are active) when a user clicks elsewhere.

Now,when i click on a div(which has a dropDown) the drop down is getting activated(menu gets created) and simultaneously retracting (because of the window.click )

The menu's are getting created and getting destroyed at the same time!,Any work arounds to perform the window.onclick iff the clicked element is not on of the div's with a dropdown??

Silly question,from a beginner.. thanks in advance!!

here's a sample code!!.. the onclick on the div is supposed to bring out the menu -- and the window.onclick is supposed to retract the menu(all he menu's which are expanded)

<html>
    <style type="text/css">
    .bar{
    width: 30px;
    height: 30px;
    background-color: black;
    display: none;
    }
    </style>
    <script type="text/javascript" >
    function fire(){
    document.getElementById("bar").style.display="block";
    }
    window.onclick=unfire;
    function unfire(){
    if(document.getElementById("bar").style.display== "block")
    document.getElementById("bar").style.display="none";
    }
    </script>
    <input type="button" value="foo" onclick="fire()">
    <div id="bar" class="bar"></div>
    </html>

Edit:added the code sample

possible duplicate of [How to stop event propagation with inline onclick attribute?](http://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute) — Felix Kling, Dec 18 '11 at 13:04

score 1 · Answer 1 · answered Dec 18 '11 at 13:02

1

function doSomething() {
   if (this.id == "myId") return;
   // else do Something
}

answered Dec 18 '11 at 13:02

abcde123483

3,885
4
41
41

i'm checking for that in order to retract the menu's.. i need to stop the window.onclick from fireing!! – Vivek Chandra Dec 18 '11 at 13:16

score 1 · Answer 2 · answered Dec 18 '11 at 13:04

1

You can call e.stopPropagation() (browsers) or e.cancelBubble = true (IE) to prevent the event from propagating up the tree.

answered Dec 18 '11 at 13:04

SLaks

868,454
176
1,908
1,964

`return false` will only prevent the default action, not the propagation (it does both only in jQuery). – Felix Kling Dec 18 '11 at 13:05
@felixkling , how to prevent it from propagating using native js ?? – Vivek Chandra Dec 18 '11 at 13:26
@VivekChandra: SLaks answer is correct now and it is plain JS. I referred to his initial answer. – Felix Kling Dec 18 '11 at 13:28

score 1 · Accepted Answer · edited Dec 18 '11 at 13:09

1

this will happen because of a mechanism called "Event bubbling", which will likely not just firing your event for the specific DOM element, but will also continue to raise your event from your child DOM element(s), until it reach the very beginning of your page.

using jquery library for example, provides us with a method to prevent this default action from happening (event.stopPropagation() ).

I don't know exactly if native JS code can achieve the same behavior, but let me know if you can use jQuery, and I will provide you with code example.

thanks,

edited Dec 18 '11 at 13:09

Felix Kling

795,719
175
1,089
1,143

answered Dec 18 '11 at 13:04

Mohammed Swillam

9,119
4
36
47

1

`event.stopPropagation()` is actually a method of W3C compliant event objects. – Felix Kling Dec 18 '11 at 13:06
Except that it's not spelled that way. – SLaks Dec 18 '11 at 13:07
@mohammedelsayed using native js.. i'm already sending a variable in the div's onclick,how do i get hte event object? – Vivek Chandra Dec 18 '11 at 13:24
@VivekChandra: How about posting the code in the question? It would make it easier to help. – Felix Kling Dec 18 '11 at 13:28

score 0 · Answer 4 · answered Dec 18 '11 at 13:06

0

You want to trigger onmousedown on the divs instead.

answered Dec 18 '11 at 13:06

Babiker

18,300
28
78
125

how to disable window.onclick event when "onclick" is called on a specific div?

4 Answers4