javascript - 背景图像事件处理程序

Question

如果一个 HTML 元素(例如 div)有一个 CSS 背景图片，是否可以分配一个事件处理程序，当用户点击背景图片时触发，而不是其他任何部分元素？

如果是这样，一个 JQuery 示例将不胜感激。

Answer 1

虽然无法检测到对背景图片的点击，但您可以使用一些巧妙的 JS 和 CSS 魔法，并在背景图片上设计一个遮蔽元素，如下所示:http://jsfiddle.net/ahmednuaman/75Rxu/ , 这是代码:

HTML:

<div id="bg_img_1"></div>
<div id="bg_img_2">
    <div id="hit"></div>
</div>

CSS:

div
{
    display: block;
    position: relative;
    width: 200px;
    height: 200px;
    background-repeat: no-repeat;
    background-position: center center;
}
#bg_img_1
{
    background-image: url('http://placekitten.com/100/100');   
}
#bg_img_2
{
    background-image: url('http://placekitten.com/100/100');   
}
#hit
{
    display: block;
    position: absolute;
    width: 100px;
    height: 100px;
    background: #000000;
    opacity: .3;
    margin: 50px;
}

JS:

function handleClick(e)
{
    console.log(e.target.id);
}

$( '#bg_img_1' ).click( handleClick );
$( '#hit' ).click( handleClick );