javascript - 是否可以在列表中的背景图像上触发 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 标签以实现良好的语义和良好的降级页面)效果最好。

在 LI 中使用 IMG 将其样式设置为看起来相同应该没有太多问题，我一直在需要删除/编辑图标的列表中做类似的事情。