-1

这个问题与我在这个网站上问的最后一个问题有关 -使用 javascript 从 html 背景图像“链接”？.

我收到了一个很好的答案，但是背景图像的链接也适用于容器。我将如何确保仅单击（id 主体的）背景图像而不是容器链接到任何网站？

我希望我已经足够清楚了。提前谢谢了。

的HTML：

<html>

<head>
<link href = "style1.css" rel = "stylesheet" type = "text/css">
</head>

<div id = "header">
Header
</div>

<body>

<div id = "body">

<div class = "container">

</div>
</div>

</body>

</html>

<script>
document.getElementById('body').onclick = function() {
window.location = 'http://www.google.com/';
}
</script>

CSS 代码：

#header{
width:100%;
height:50px;
background-color:black;
}

#body {
width:100%;
height:2000px;
background-image:url('uploads/1.jpg');
cursor:pointer;
}


.container{
 width: 1000px;
margin-right: auto;
margin-left: auto;
height: 1000px;
background-color:white;
}
4

3 回答 3

2

在您的点击处理程序中，您可以检查被点击的元素，如果不是body（意味着它是一个孩子），那么不要做任何事情。

document.getElementById('body').onclick = function(e) {
    // e.target is what you clicked on
    // this is always what the event was bound to
    if(e.target === this){
        window.location = 'http://www.google.com/';
    }
}
于 2013-02-05T15:57:36.223 回答
0

尝试在您的脚本中添加此代码：

document.querySelector('#body .container').onclick = function() {return false; }

具有：

<script>
document.getElementById('body').onclick = function() {
window.location = 'http://www.google.com/';
}
document.querySelector('#body .container').onclick = function() {return false; }
</script>
于 2013-02-05T15:54:01.677 回答
0

你也可以做一个 return false

document.getElementById('body').onclick = function(e)
{
    if(!(e.target===this))
        return false;
    console.log("click");
    //window.location = 'http://www.google.com/';
}
于 2013-02-05T16:08:19.043 回答