목록의 글 머리 기호 이미지에 클릭 이벤트 할당

Question

JavaScript (또는 JQuery)를 통해 목록 글 머리 기호 또는 이미지를 대체하는 이미지에 onclick-event를 할당하려고합니다. 이제는 목록 항목도 클릭 할 수있는 상태에서 작업하는 방법을 제공하지만 필요한 것은 아닙니다. 목록 항목 자체는 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> 

한 사용자 목록 요소에 사용자가 다른 목록에 추가해야한다는 우리 가정

해당 목록이있다. 그것은 문제없이 작동합니다. 하지만 지금은 목록 총알에 단일 클릭 이벤트를 추가하여 그룹을 확장하거나 축소합니다. 즉 클릭 할 때 각 그룹의 사용자를 숨기거나 표시합니다.

내 프로젝트에 JQuery를 사용하면 목록 글 머리 기호에 대한 선택기가없는 것으로 보입니다. 그래서 배경 - 이미지 및 이미지 대신 목록 항목 텍스트 앞에 시도했지만 내 클릭 이벤트를 할당 할 수 없습니다. 또한, 이러한 솔루션 중 하나를 작동 시키더라도 clickable 및 doubleclick이 모두 동일한 요소에 지정되면 문제가 발생하기 때문에 clickable list-bullet이 doubleclickable 영역 아래에 있으면 더 좋을 것입니다.

누구에게 아이디어가 있습니까? 미리 감사드립니다.

Answer 1

또한 mblase75의 대답에 따라 CSS로 기본 글 머리 기호를 숨길 수도 있습니다.

ul { 
    list-style:none; 
} 

또한 별도로 클릭 이벤트를 처리시키는 이미지에서 분리 할 수있는 범위에서 <li> 내용을 포장 할 수있다.

Answer 2

LI 총알은 기술적으로 DOM의 일부라고 생각하지 않으므로 클릭 이벤트를 할당 할 수 없습니다.

이것은 모든 라인에서 UL/LI 태그를 <img class="li" src="bullet.gif" />....<br />과 같이 바꿔야하고 이미지에 클릭 이벤트를 할당해야 함을 의미합니다.

Answer 3

이게 당신이 찾는거야? http://simplebits.com/notebook/2004/07/18/clickable/

CSS 속성을 사용하여 연결 가능 영역을 "확장하여 글 머리 목록 또는 이미지를 포함합니다.