Jquery - 背景图像点击

发布于 2024-12-04 06:58:57 字数 805 浏览 1 评论 0原文

我在页面中央有一个 div。我体内有背景图像。我需要使用 jquery 仅单击背景图像。如果单击 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。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦在深巷 2024-12-11 06:58:57

您可以尝试：

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

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

body, html {
  height: 100%;
}

在 css 中添加类似：的内容，否则将没有可单击的正文。

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

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/

回复收藏 0 原文

向地狱狂奔 2024-12-11 06:58:57

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

这是比较正确的做法。

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

This is more correct way.

回复收藏 0 原文

枯寂 2024-12-11 06:58:57

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

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

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

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.

回复收藏 0 原文

~没有更多了~