ansaurus

Question

Full window onClick handler in Firefox and Internet Explorer

Answer 1

+1 A:

For what it may help, the following works in IE7+, Safari, Firefox and Chrome:

<body onclick="clearmenus();">

... or "programmatically":

document.getElementsByTagName("body")[0].onclick = function(){ clearmenus(); };

Daniel Vassallo 2009-12-21 19:14:19

What about clicks on the menu itself?

Crescent Fresh 2009-12-21 19:17:41

The `clearmenus()` function will get invoked as well. There must be some logic in `clearmenus()` to not clear the menus if the click was on top of a menu.

Daniel Vassallo 2009-12-21 19:21:41

As fsb suggested, to avoid these complications, a JavaScript library like jQuery would simplify everything.

Daniel Vassallo 2009-12-21 19:25:00

The problem with this is that this only works if you click on the body, which may only cover *part* of the browser window. I'd like the clearmenu function to get invoked if you click *anywhere* in the window (other than the menu itself).

Mark Klein 2009-12-22 21:31:18

@Mark: If the body is 100% wide, doesn't it cover the full window?

Daniel Vassallo 2009-12-22 21:43:15

no - the body in that case covers the full horizontal extent of the window, but not the full vertical extent, i.e. the body could end partway down the window.

Mark Klein 2009-12-27 20:48:55

@Mark: Yes, you're right. The body might end half way into the window.

Daniel Vassallo 2009-12-27 21:53:25

Answer 2

A:

A better option for hiding a menu like that would be to use the onblur event.

<div id="menu-div" onclick="showMenu('menu');" onblur="hideMenu('menu');">
    <ul id="menu">
        <li>Thing1</li>
    </ul>
</div>

Javascript:

function showMenu(id)
{
    var me = document.getElementById(id);
    me.style.display = 'block';
}

function hideMenu(id)
{
    var me = document.getElementById(id);
    me.style.display = 'none';
}

Jeff Rupert 2009-12-21 19:14:59

Answer 3

+1 A:

jQuery makes this kind of problem very easy to solve in a cross-browser manner.

Bind an onclick event handler to body that hides the menu and another to the menu element that stops propagation of the event.

fsb 2009-12-21 19:16:27

To illustrate, you'd need a `$('*').live ('click', clearmenus)` and a `$('#menu').live ('click', function (e) { e.stopPropogation(); } )`

K Prime 2009-12-22 07:53:54

So quick to point to jQuery, there's so many easy ways to make this happen without having deviate from real man's JavaScript.

drlouie - louierd 2009-12-22 22:12:46

Answer 4

A:

I wrote a script some time ago to Determine if any "Outside" Element was Clicked with JavaScript.

Josh Stodola 2009-12-21 22:29:32

Perfect - the Firefox fix someone made on your blog is what I needed - thanks.

Mark Klein 2009-12-29 01:20:23

Then you should up-vote and accept my answer, please

Josh Stodola 2009-12-31 01:37:01

ansaurus

tags:

views:

answers:

Full window onClick handler in Firefox and Internet Explorer

related questions