Можно ли вызвать событие щелчка jQuery на фоновом изображении в списке?
-
06-09-2019 - |
Вопрос
У меня есть неупорядоченный список элементов, примерно такой, сокращенный для краткости:
<div id="elementsContainer">
<ul>
<li><a>One</a></li>
<li><a>Two</a></li>
</ul>
</div>
У меня есть стиль списка, но эти три стиля относятся к фоновым изображениям для элементов списка:
#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» и обрабатывать клики по нему отдельно.Я пойду этим путем, если это единственный вариант.Я просто хочу знать, есть ли какой-нибудь способ заставить его работать с фоновым изображением.
Заранее спасибо!
Решение
Используйте тег IMG.Лучшее, что вы могли бы сделать, это обнаружить щелчок по самому элементу LI, что в конечном итоге привело бы к путанице.Тег IMG (и даже тег A вокруг него для семантической корректности и приятного ухудшения качества страниц) будет работать лучше всего.
У вас не должно возникнуть особых проблем с его стилизацией, чтобы он выглядел одинаково, используя IMG в LI. Я постоянно делаю что-то подобное в списках, где мне нужно удалять/редактировать значки.
Другие советы
Вы не можете различить щелчок по фоновому изображению, поскольку, что касается DOM, его на самом деле там нет.Все, что у вас есть, это a
сам элемент (который представлен вашим фоновым изображением), и его обработчик onclick будет срабатывать, пока вы щелкнете в любом месте внутри тега, тексте или нет.
Вероятно, лучше всего использовать img
тег (или какой-либо другой отдельный тег) и обрабатывайте клик по нему отдельно, как вы заключили в своей статье.
для достижения желаемого эффекта вы можете поместить диапазон с некоторыми пробелами в область, в которой в конечном итоге появится изображение удаления, а затем подключить событие к щелчку этого диапазона.
Поместите поверх него элемент и зарегистрируйте с его помощью событие.