在列表项目符号图像上指定单击事件

Assign click event on list bullet-images

本文关键字：单击 事件 图像 列表 项目 符号      更新时间：2023-09-26

我尝试通过JavaScript(或JQuery)在列表项目符号上分配一个onclick-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>

双击一个用户列表元素，该用户应该被添加到另一个列表中。这样做没有问题。但是现在我想在列表项目符号上添加单个单击事件来展开和折叠组，即在单击时隐藏和显示每个组的用户。

使用JQuery为我的项目，似乎没有选择器列表子弹。因此，我在列表项文本之前尝试了背景图像和图像，但无法分配我的单击事件。此外，即使我得到了这些解决方案中的一个，我希望它更好，如果可点击的列表符号将在双击区域下方，因为它会导致问题，如果click和双击都被分配在同一个元素上。

有人知道吗?

我不认为LI符号在技术上是DOM的一部分，所以你不能给它们分配点击事件。

这意味着你必须在每一行用<img class="li" src="bullet.gif" />....<br />之类的东西替换你的UL/LI标签，并为图像分配点击事件。

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

ul {
    list-style:none;
}

您还可以将<li>内容包装在一个span中，以将其与图像分开，让您单独处理单击事件。

你可以用event.offsetX值来识别点击子弹:如果子弹被击中，它是负的。

对我来说这是一个解决方案。这是一个纯javascript代码片段

function click_li(event) {
  if (event.offsetX>=0) {
    console.log('click on li.#'+event.target.id);
    return;
    }
  console.log('click on bullet li.#'+event.target.id);
  let sibling = event.target.nextElementSibling;
  if (sibling && sibling.tagName == 'UL') 
    sibling.classList.toggle('hideUL');
}
.hideUL {
  display: none  !important;
}
<ul>
<li id="myid1" onclick="click_li(event)">one thing</li>
    <ul>
    <li>sub list item1</li>
    <li>sub list item2</li>
    </ul>
<li id="myid2" onclick="click_li(event)">another thing</li>
    <ul>
    <li>sub list item1</li>
    <li>sub list item2</li>
    </ul>
</ul>

相关文章：