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

StackOverflow https://stackoverflow.com/questions/587147

Вопрос

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

<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 тег (или какой-либо другой отдельный тег) и обрабатывайте клик по нему отдельно, как вы заключили в своей статье.

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top