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）或“event”中没有看到任何可以确定我是否点击文字或图片的内容。

是的，我知道我可以只有一个单独的“img”标签并单独处理它的点击。如果这是唯一的选择，我会走那条路。我只是想知道是否有某种方法可以使它在背景图像上工作。

提前致谢！

Answer 1

使用IMG标记。您可以做到的最好的方法是检测LI元素本身的点击，这最终会变得混乱。 IMG标签（甚至围绕它的A标签用于语义良好和降级良好的页面）最有效。

使用LI中的IMG，你应该没有太多问题使它看起来相同，我在列表中的所有时间都做类似的事情，我需要删除/编辑图标。

Answer 2

你不能区分背景图像上的点击，因为就DOM而言，它并不是真的存在。你所拥有的就是a元素本身（恰好与你的背景图像一起呈现），只要你点击标签内部的任何地方，文本与否，它的onclick处理程序就会激活。

最好使用img标记（或其他单独的标记）并单独处理点击，如您在撰写中所述。

Answer 3

您可以为所需效果做的是在删除图像最终出现的区域中放置一些带有空格的跨度，然后将该事件挂钩到该跨度的点击。

Answer 4

在其上放置一个元素，然后窃取该事件。

是否可以在列表中的背景图像上触发jQuery单击事件？

4 个答案: