在列表項目符號圖像上分配點擊事件

Question

我嘗試通過 JavaScript（或 JQuery）在列表項目符號上分配一個 onclick 事件，或者更確切地說是替換它們的圖像。 我現在如何在列表項也可單擊時完成這項工作，但這不是我需要的。 列表項本身應該得到一個雙擊事件。

假設我們有這個列表：

<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 時，似乎沒有用於列表項目符號的選擇器。 因此，我在列表項文本之前嘗試了 background-images 和 -images ，但無法分配我的點擊事件。 此外，即使我得到這些解決方案之一的工作，我希望可點擊列表項目符號位於可雙擊區域下方，因為如果單擊和雙擊都分配在同一個元素上會導致問題。

有人有想法嗎？ 提前致謝。

Answer 1

我不認為 LI 項目符號在技術上是 DOM 的一部分，因此您不能將點擊事件分配給它們。

這意味着您必須在每一行上用<img class="li" src="bullet.gif" />....<br />的東西替換 UL/LI 標簽，並將點擊事件分配給圖片。

Answer 2

除了 mblase75 的回答，您還可以使用 CSS 隱藏默認項目符號。

ul {
    list-style:none;
}

您還可以將<li>內容包裝在一個跨度中以將其與圖像分開，讓您單獨處理點擊事件。

Answer 3

您可以使用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>

Answer 4

這就像你在尋找什么？ http://simplebits.com/notebook/2004/07/18/clickable/

它使用CSS屬性“拉伸”可鏈接區域以包含項目符號列表或圖像。