Question

我在页面中央有一个div。我身体里有背景图像。我只需要在background-image上使用jquery click。如果单击id为divPage的div，则不会发生任何事情。

感谢您的建议或可能的其他解决方案。

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

我尝试了这个，但它无法正常工作：

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

点击ID为divPage的div。

Answer 1

您可以尝试：

$(function () {
  $('body').bind('click', function (evt) {
    if(evt.target == $('body')[0]) {
      console.log('body clicked');
    }
  });
});

请注意，如果您的内容的高度非常低，您可能需要以下内容：

body, html {
  height: 100%;
}

在您的CSS中，或者没有可点击的正文。

演示：http://jsfiddle.net/mp4TH/

Answer 2

未经测试，但是这样的事情怎么样：

$('body').click(function() {
            alert("Click");
        })
$('body>*').click(function(e) {
            e.stopPropagation()
})

虽然它没有检测到背景图像上的点击，但它确实阻止了点击动作传播到身体顶部的任何元素。因此，只能在身体上检测到点击。

Answer 3

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

这是更正确的方式。

Jquery - 背景图像点击

3 个答案: