在列表项目符号图像上分配点击事件 [英] Assign click event on list bullet-images

问题描述

我尝试通过JavaScript(或JQuery)为列表项目符号或图像替换项目符号分配onclick事件.现在，当列表项也可单击时，我将如何进行工作，但这不是我所需要的.列表项本身应获得一个doubleclick事件.

I try to assign an onclick-event on list bullets, or rather the images replacing them, via JavaScript (or JQuery). I now how to get that work when the list-item is also clickable, but that is not what I need. The list item itself should get a doubleclick-event.

假设我们有该列表:

<ul id="allUsers" class="userselect">
    <li id="group1" class="group">Group 1</li>
    <li id="user1-1" class="user">User 1.1</li>
    <li id="user1-2" class="user">User 1.2</li>
    <li id="group2" class="group">Group 2</li>
    <li id="user2-1" class="user">User 2.1</li>
    ...
</ul>

在双击一个用户列表元素时，应将用户添加到另一列表中.那没有问题.但是现在我想在列表项目列表上添加单击事件，以展开和折叠组，即单击时隐藏并显示每个组的用户.

On doubleclick on one user-list-element that user should be added to another list. That works without problems. But now I want to add the single-click event on the list-bullets to expand and collapse the groups, i.e. hide and show the users of each group when clicking.

在我的项目中使用JQuery时，似乎没有列表项目符号的选择器.因此，我尝试在列表项文本之前尝试使用background-images和-images，但是无法分配我的click事件.此外，即使我可以使用这些解决方案之一，也希望将可点击列表项目放在doubleclickable区域下方，因为如果将click和doubleclick都分配在同一元素上，则会导致问题.

With using JQuery for my project it seems that there is no selector for list bullets. So I've tried background-images and -images before the list-item text instead but wasn't able to assign my click event. Furthermore, even if I get one of these solutions to work, I would like it better if the clickable list-bullets would be beneath the doubleclickable area because it leads to problems if click and doubleclick both are assigned on the same element.

有人有想法吗?预先感谢.

Has anyone an idea? Thanks in advance.

推荐答案

除了mblase75的答案，您还可以使用CSS隐藏默认的项目符号.

In addition mblase75's answer, you can also hide the default bullets with CSS.

ul {
    list-style:none;
}

您还可以将< li> 内容包装在一个跨度中，以将其与图像分开，从而使您可以分别处理点击事件.

You could also wrap the <li> content in a span to separate it from the image, letting you handle click events separately.

这篇关于在列表项目符号图像上分配点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！