3

我有一个无序列表的项目，像这样，为了简洁而缩短：

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

提前致谢！

4

4 回答 4

7

使用 IMG 标签。你能做的最好的事情就是检测到对 LI 元素本身的点击，这最终会变得混乱。一个 IMG 标记（甚至是一个围绕它的 A 标记，用于语义上的好处和很好的降级页面）效果最好。

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

于 2009-02-25T18:14:13.363 回答
2

您无法区分对背景图像的单击，因为就 DOM 而言，它并不真正存在。您所拥有的只是a元素本身（恰好与您的背景图像一起呈现），只要您单击标签内的任何位置，无论是否是文本，它的 onclick 处理程序都会触发。

img正如您在文章中总结的那样，最好使用标签（或其他一些单独的标签）并单独处理点击。

于 2009-02-25T18:15:03.813 回答
1

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

于 2009-02-25T18:25:01.450 回答
0

在它上面放一个元素，然后用它窃取注册事件。

于 2014-07-25T03:32:15.170 回答