Assign click event on list bullet-images

问题

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.

Assuming we have that list:

<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.

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.

回答1:

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

ul {
    list-style:none;
}

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

回答2:

I don't think the LI bullets are technically part of the DOM, so you can't assign click events to them.

This means you'll have to replace your UL/LI tags with something like <img class="li" src="bullet.gif" />....<br /> on every line, and assign click events to the images.

回答3:

Is this like what you're looking for? http://simplebits.com/notebook/2004/07/18/clickable/

It uses CSS properties to "stretch" the linkable area to include the bullet list or image.

来源：https://stackoverflow.com/questions/7244875/assign-click-event-on-list-bullet-images