Jquery - background-image click

Question

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: auto;}

I tried this, but it does not work correctly:

$('body').click(function() {
            alert("Click");
        })

It was click on the div with id id divPage.

This is impossible. The background image is not hit test visible to clicks. — Tejs, Sep 14 '11 at 10:58

Yoshi · Accepted Answer · 2011-09-14T11:27:16.673

8

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/

edited Sep 14 '11 at 11:27

answered Sep 14 '11 at 11:17

Yoshi

54,081
14
89
103

score 0 · Answer 2 · edited Sep 23 '14 at 12:42

0

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.

edited Sep 23 '14 at 12:42

Antony Gibbs

1,321
14
24

answered Sep 14 '11 at 11:05

n00dle

5,949
2
35
48

score 0 · Answer 3 · answered Sep 14 '11 at 11:09

0

$('#divPage').click(function(evn) {
    evn.stopPropagation();
});

This is more correct way.

answered Sep 14 '11 at 11:09

haynar

5,961
7
33
53

Jquery - background-image click

3 Answers3