Question

如果HTML元素（例如div）具有CSS背景图像，则可以分配在用户单击背景图像时触发的事件处理程序，而不是该元素的任何其他部分吗？ / p>

如果是这样，我们非常感谢JQuery的例子。

Answer 1

虽然无法检测到背景图像上的点击，但您可以使用一些聪明的JS和CSS魔法，并在背景图像上设置一个屏蔽元素，如下所示：http://jsfiddle.net/ahmednuaman/75Rxu/，这里是代码：< / p>

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

Answer 2

我认为有一种更好更简单的方法来实现这一点就是我的解决方案

$(document).ready(function() {
$("*").click(function(event)
{
    if(event.target.nodeName == 'BODY')
    {
        alert('you have just clicked the body background');
    }
});

Answer 3

这是一个非常基本的代码，仅适用于x轴，可以通过注入img元素来显示背景图像网址值，因为它是src并检测背景图像高度和宽度，用于计算是否在背景图像上发生了单击。

此代码需要大量改进。它在y轴中不起作用。此外，background-position和background-size也不参与。但是添加这些未来很容易。

以下是Fiddle：

这是jQuery代码：

$('#d').bind('click', function(e){
    var d = $(this),
        bg = {};
    //insert an image to detect background-image image size
    $('body').append(
        $('<img/>').attr('src',
                   d.css('background-image').split('(')[1].split(')')[0]
    ).attr('class', 'testImage'));
    bg.h = $('.testImage').height();
    bg.w = $('.testImage').width();
   console.log(bg, e.offsetX, $('.testImage').width());

    if(e.offsetX >  $('.testImage').width()){
        $('#l').text('it was NOT on background-image');
    }
    else{
        $('#l').text('it was on background-image');
    }
   $('.testImage').hide();
})

背景图像事件处理程序

3 个答案: