Блог

Если HTML-элемент (например, div ) имеет фоновое изображение CSS, возможно ли назначить обработчик событий, который запускается, когда пользователь нажимает на фоновое изображение, но не на какую-либо другую часть элемента?

Если да, то был бы весьма признателен за пример jQuery.

Хотя невозможно обнаружить щелчок по фоновому изображению, вы можете использовать некоторые хитроумные 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 );
  

Я думаю, что есть лучший и простой способ добиться этого, вот мое решение

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

Вот очень простой код, который работает только в x axis, чтобы показать, что это возможно с введением img элемента со значением URL фонового изображения, как оно есть src , и определением высоты и ширины фонового изображения, чтобы вычислить, произошел ли щелчок по фоновому изображению или нет.

Этот код нуждается в тоннах улучшений. Это не работает в y axis. Также background-position и background-size не задействованы. Но эти фьючерсы легко добавить.

Вот Скрипка:

И вот код 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();
})