Можно ли вызвать событие щелчка jQuery на фоновом изображении в списке?

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

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

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

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

Заранее спасибо!

Ответов (4)

Решение

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

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

Поместите элемент поверх него и украдите зарегистрируйте событие с этим.

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

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

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