Question

我正在使用CSS将背景图片应用于包含网站上所有内容的div标签。

<div id="mainBack">
  <%-- All other content goes here --%>
</div>

带有背景属性的CSS id ......

#mainBack
{
    background: url(../images/background.jpg) repeat-x top;
    padding: 15px 0 20px 0;
}

问题： 我试图弄清楚如何在点击背景图像时打开一个新的浏览器窗口到另一个URL。我试过用jQuery做这个，但是我实现它的方式实际上导致网站上的任何点击都打开一个新窗口。执行此操作的jQuery click事件 - 虽然不正确 - 如下所示：

$('#mainBack').click(function () {
    window.open('http://InternalBusProcess:8083/HyperFix.jpg', 'HyperFix');
});

提前感谢有关如何以实际可行的方式实施此行为的任何建议！

Answer 1

您可以停止在click元素之上传播元素的#mainBack个事件。

例如：

<div id="mainBack">
    <a href="#">Some Link</a>
</div>

<script>
$('a').on('click', function (event) {
    event.stopPropagation();
});
</script>

这将使得点击任何链接都不允许事件冒泡到任何祖先元素。这反过来会使检测到#mainBack元素的点击成为可能。

您必须在不打开弹出窗口的情况下停止在您想要点击的任何元素上传播事件。

另请注意，.on()是jQuery 1.7中的新功能，因此如果您使用的是旧版本，请将.on()更改为.bind()。

更新

您还可以使用事件处理程序中的event对象来检查目标元素是否为#mainBack元素：

$('#mainBack').click(function (event) {
    if (event.target.id == 'mainBack') {
        window.open('http://InternalBusProcess:8083/HyperFix.jpg', 'HyperFix');
    }
});

以下是使用event.target：http://jsfiddle.net/j5NuW/的演示（注意事件处理程序已附加到body元素，但警告仅显示您是否单击#mainBack元素）

Answer 2

你可以通过添加一行代码和事件参数来检查被点击的元素是div还是其他东西：

$('#mainBack').click(function (event) {
    if(event.target==this)
        window.open('http://InternalBusProcess:8083/HyperFix.jpg', 'HyperFix');
});

在背景div上单击打开新窗口

2 个答案:

更新