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

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

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

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

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

Answer 1

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

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

Answer 2

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

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

Answer 3

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

Answer 4

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