컨테이너를 다시 클릭하지 않고 컨테이너에 클릭 이벤트 전달 (자바 스크립트)

Question

일련의 <ul> 목록 인 탐색 메뉴가있는 상황이 있으며 처음에는 <li>이 탭입니다. 탭 안의 <a> 태그 대신 전체 <li>을 클릭 가능하게하고 싶습니다. 그래서 예를 들면 :

<ul id="home"> 
    <li id="navtab"> 
     <a id="home-link" onclick="doHome();">HOME</a> 
    </li> 
</ul> 

그리고 앵커가 동적으로 생성, 그래서이 구조를 유지해야되고있다. 따라서 <li> 레벨에서 클릭 이벤트를 캡처하는 방법을 알아 내려고 <a> 태그에서 onlick을 실행 한 다음 클릭을 다시 실행하고 레벨을 <li>로 설정하고 재귀를 발생시키지 마십시오.

저는 jQuery를 사용하고 있습니다 만, 대답이나 관련성은 필요하지 않습니다.

이미 긍정적 인 결과없이 e.stopPropagation() 및 preventDefault를 추가하려고했습니다.

Answer 1

Javascript를 사용하는 대신 CSS를 사용하지 않고 <a>을 블록 수준 요소로 만들어 목록 항목의 전체 공간을 채우는 것이 어떨까요?

#home li a { 
    border:solid 1px #000; 
    display:block; 
} 

이것은 본질적으로 전체 <li> 클릭을해야합니다. 그러나 CSS를 사용하여 li에 특정 높이 또는 패딩 값을 적용한 경우 a의 해당 선택기로 이동해야합니다.

Answer 2

부모에게 기능을 복사 할 수 있습니다. 이것은 dom 객체를 전달하거나 다른 dom 객체를 해당 함수의 인수를 기준으로 참조하는 경우 문제가 될 수 있습니다. 나는 이것을 테스트하지는 못했지만 괜찮습니다.

$('#home-link').each(function(){ 
    var func = this.onclick; 
    this.parentNode.onclick = func; 
    this.onclick = function(){ }; 
});