/    Sign up×
Community /Pin to ProfileBookmark

Detecting mouse click position

Copy linkTweet thisAlerts:
Sep 16.2006

I have a layer that appears when a user enters some text into a text box. (Think google suggests).

This all works ok, the one bit i am stuck on is this. If i decide not to select an item from the list within the layer that has appeared, i cant close it.

Is there a way to know if a user has clicked outside of the layer to trigger some javascript to set the css display property to none.

I have tried using the textbox’s onblur event, even the layers onblur event.

To complicate things slightly, it is a two step drill down list, firstly it presents the user wth a set of options (categories), they select one category and the layer is then filled with items within that category.

How can i hide the layer if they dont select an item in the list?

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@bohbohbagauthorSep 17.2006 — You absolute star!

So simple in the end.

I have attached a js method to the body's onclick event like so:

<body onclick="hideLayer()">

Is there a way to have it all in javascript.

Something like

body.onclick = hideLayer

If not then its not a problem. Just wondering, as you can gather, i am not a js expert as my skils are server side, and anything beyond form validation and i get stuck. ?
Copy linkTweet thisAlerts:
@KravvitzSep 19.2006 — You're welcome ?

It's not only possible to keep all of the JavaScript in .js files, it's best practice to do so. [1]

Try this.
window.onload = function() {
document.body.onclick = hideLayer;
}
[1] [url=http://www.alistapart.com/articles/behavioralseparation/]Behavioral Separation[/url]

[url=http://www.onlinetools.org/articles/unobtrusivejavascript/]Unobtrusive JavaScript[/url]

[url=http://www.domscripting.com/book/sample/]DOM Scripting - Sample chapter: Best Practices[/url]

[url=http://www.severnsolutions.co.uk/articles/001/]Accessible DHTML[/url]
×

Success!

Help @bohbohbag 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 5.17,
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,
)...