I'm trying to catch an event when a user clicks a blank space on the page with jQuery. For example, lets say you have the following:
<html>
<head>
<title>Test</title>
</head>
<body>
<p>Here's some text!</p>
<body>
</html>
I want to catch the event when the user clicks on anything but the p tag.
Is there a way to catch something like this?
You could observe the document for onclick, and then check the event.currentTarget in your event handling function.
You can do something like this (I think)
$('body').not('p').click(function(){});
Not sure how well that will work, though.
This seems to work:
$(function() {
$('body').click(function() {
alert('clicked the page');
return false;
});
$('*:not(body)').click(function() {
alert('clicked an item!');
return false;
});
});
One "problem" you'll have is that paragraphs are block elements by default, so clicking to the side of a sentence will produce an item click even if it looks like you haven't clicked on an item.
This works in chrome. Haven't tried other browsers. Works off the idea that stickmangumby had:
$('body').click( function (e) {
if ( e.target == this )
alert('works');
});
I'm making a little web app that is similar to Taskpaper (for the Mac) and I want it to mimic the application's behavior. More of a proof of concept than anything else
In light of your comments, I wouldn't worry about the body specifically then. Instead wire up a div so that you can constrain the area you want to react to events. In the case where there's no other elements on the page, it's the same thing.
For what it's worth, on any web page, your users would hate you if clicking any whitespace anywhere does something - it would be a poor UI experience.