/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Event Propagation Issue

Copy linkTweet thisAlerts:
Aug 07.2008

I have a link which is clicked on to show a div menu. The div menu should close when the document is clicked on.

So here is the simple layout…

[CODE]
<head>
<script type=”text/javascript”>

hide_menu(){
document.getElementById(‘menu’).style.display = ‘none’;
}

document.onclick = function(){ hide_menu(); }

show_menu(){
document.getElementById(‘menu’).style.display = ”;
}

</script>
</head>
<body>
<a href=”javascript:void(0);” onclick=”show_menu();”>
<div id=”menu”></div>
</body>
[/CODE]

The problem is the document.onclick hide_menu() event is OVERRIDING the link’s onclick show_menu() event. The div menu never shows! ?

How can this be resolved? I tried addEventListener and couldn’t get it to work.

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@Declan1991Aug 07.2008 — <script type="text/javascript">

hide_menu(){
document.getElementById('menu').style.display = 'none';
document.onclick = function(){ hide_menu(); };
}
show_menu(){
document.getElementById('menu').style.display = '';
document.onclick = function(){};
}

</script>
Copy linkTweet thisAlerts:
@KorAug 07.2008 — <i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;style type="text/css"&gt;
#menu{
width:100px;
height:100px;
background:#ccc;
}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
function menudis(e){
var target=(e &amp;&amp; e.target)||(event &amp;&amp; event.srcElement);
var divM=document.getElementById('menu');
var linkM=document.getElementById('menulink');
divM.style.display=target==linkM||target==divM?'block':'none';
}
document.onclick=menudis;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="menulink"&gt;show menu&lt;/div&gt;
&lt;div id="menu" style="display:none"&gt;MENU&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@axiom82authorAug 07.2008 — KOR, your code has worked well ? There is only one problem with the code.

When the menu is clicked on, it disappears. Is there a way to make the document.onclick event trigger only when the menu is not being clicked on? The menu has checkboxes so it needs to stay open unless anywhere else on the screen is clicked.

Thank you both for your help!
Copy linkTweet thisAlerts:
@axiom82authorAug 07.2008 — Oh I was able to add a bit more to the function to make it work! ? The link is now a button and the menu is called select. Thanks for your help!

[CODE]
 <script type="text/javascript">

function menudis(e){

var target = (e && e.target) || (event && event.srcElement);
var select = document.getElementById('my-select');
var select_button = document.getElementById('my-select-button');
select.style.display = (target == select_button || target.parentNode == select || target.parentNode.parentNode == select) ? 'block' : 'none';

}

document.onclick=menudis;

</script>[/CODE]
×

Success!

Help @axiom82 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.1,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...