Возможно ли запустить событие jQuery click на фоновом изображении в списке?

Question

У меня есть неупорядоченный список элементов, что-то вроде этого, укороченный для краткости:

<div id="elementsContainer"> 
    <ul> 
    <li><a>One</a></li> 
    <li><a>Two</a></li> 
    </ul> 
</div> 

У меня есть список стилизованного, но эти 3 стилей борьба с фоновыми изображениями для элементов списка:

#elementsContainer ul li { 
    list-style:none; 
} 
#elementsContainer a { 
    background: transparent url(/images/icons/bullet_delete.png) no-repeat 5px 50%; 
} 

#elementsContainer a:hover, 
#elementsContainer a:focus, 
#elementsContainer a:active { 
    background:#fff url(/images/icons/delete.png) no-repeat 5px 50%; 
} 

Список выглядит великолепно - он помещает небольшой значок удаления слева от текста для каждого элемента списка. Тем не менее, я хочу использовать jQuery (1.3) для обработки событий кликов для каждого элемента, и я хотел бы иметь отдельную функциональность между фоновым изображением элемента списка и текстом элемента списка. Если я нажму на изображение, я хочу удалить элемент. Если я нажму текст, я хочу отредактировать элемент.

Я начал использовать что-то вроде этого:

$("a").live("click", function(event){ 
    alert($(this).text()); 
}); 

Но я не вижу ничего в $ (это) или «событие», что я могу определить, если я нажав на текст или изображение.

Да, я знаю, что у меня может быть только отдельный тег «img» и обрабатывать щелчок по нему отдельно. Я поеду по этому маршруту, если это единственный вариант. Я просто хочу знать, есть ли способ заставить его работать на фоновом изображении.

Заранее благодарен!

Answer 1

Пойдите с тегом IMG. Лучшее, что вы могли бы сделать, это обнаружить щелчок по самому элементу LI, который в конечном итоге будет беспорядочным. Тег IMG (и даже тег A вокруг него для семантической доброты и красиво ухудшающих страниц) будет работать лучше всего.

У вас не должно быть много проблем, чтобы он выглядел одинаково с использованием IMG внутри LI, я все время делаю что-то подобное в списках, где мне нужно удалять/редактировать значки.

Answer 2

Вы не можете отличить клик на фоновом изображении, так как в отношении DOM это не так. Все, что у вас есть, это элемент a (который, как представляется, будет представлен вашим фоновым изображением), и его обработчик onclick будет срабатывать до тех пор, пока вы нажимаете в любом месте тега, текста или нет.

Возможно, лучше использовать тег img (или какой-либо другой отдельный тег) и обрабатывать щелчок по нему отдельно, как вы это сделали в своем отчете.

Answer 3

то, что вы могли бы сделать для желаемого эффекта, состоит в том, чтобы поместить пробел с некоторыми пробелами в области, в которые в конечном итоге появится изображение для удаления, а затем привязать событие к щелчку этого диапазона.

Answer 4

Поместите элемент над ним и украдите событие с этим.