Jquery - background-image click
I have a div in the center of the page. I have the background-image in the body. I need to do using jquery click only on the background-image. If you click the div with id divPage, nothing happens.
Thanks for the advice or possibly another solution.
HTML:
<body>
<form id="formBackground" method="post">
<div id="divPage">
Text.
</div>
</form>
</body>
CSS
body{
padding: 0px;
margin: 0px;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
color: white;
background-image: url('../images/backgrounds/bg.jpg');
background-repeat:no-repeat;
background-position:top;}
div#divPage{
width: 800px;
height: 300px;
margin: aut开发者_如何学JAVAo;}
I tried this, but it does not work correctly:
$('body').click(function() {
alert("Click");
})
It was click on the div with id id divPage.
You can try:
$(function () {
$('body').bind('click', function (evt) {
if(evt.target == $('body')[0]) {
console.log('body clicked');
}
});
});
Note, if the height of your contents is very low, you'll probably want something like:
body, html {
height: 100%;
}
in your css, or there will be no body to be clickable.
Demo: http://jsfiddle.net/mp4TH/
$('#divPage').click(function(evn) {
evn.stopPropagation();
});
This is more correct way.
Untested, but how about something like this:
$('body').click(function() {
alert("Click");
})
$('body>*').click(function(e) {
e.stopPropagation()
})
Whilst it's not detecting a click on the background image, it does prevent the click action propagating for any element on top of the body. So the click will ONLY be detected on the body itself.
精彩评论