하이퍼 링크 노드의 모든 하위 요소도 링크됩니까?

Question

기본적으로 배경 이미지가있는 큰 하이퍼 링크 요소가 있습니다. 사용자가이 버튼을 가리키면 하이퍼 링크에 대한 일부 내용을 편집 할 수있는 입력 양식을 팝업하는 편집 버튼이 나타납니다.

예를 들어 사진 앨범을 찍습니다. 표지 사진과 이름으로 모든 사용자의 사진 앨범을 표시합니다. 사진 앨범을 클릭하면 해당 앨범의 모든 컨텐츠가있는 다른 페이지로 사용자가 재배치됩니다. 그러나 사진 위로 마우스를 가져 가면 앨범의 오른쪽 하단 모서리 위에 편집 버튼이 표시됩니다. 그들이이 버튼을 클릭하면 앨범의 제목을 편집하기위한 편집 양식이 노출됩니다.

그러나 노출 된 수정 버튼을 클릭하면 링크가 활성화되어 해당 사진 앨범의 콘텐츠로 전송됩니다. 편집 양식을 노출하지만 페이지는 자동으로 다른보기로 전송되므로 중요하지 않습니다.

어떻게 해결할 수 있습니까? 하이퍼 링크 노드의 모든 하위 노드도 하이퍼 링크되어 있습니까? 그렇다면 어떻게 그 편집 단추 하나만으로 하이퍼 링크 메커니즘을 비활성화 할 수 있습니까?

Answer 1

https://developer.mozilla.org/en-US/docs/DOM/event.stopPropagation 및 http://api.jquery.com/event.stopPropagation/에 대한 문서를 참조하십시오.

$(elementThatOpensTheEditBox).click(function(e){ 
    e.preventDefault(); 
    e.stopPropagation(); 

    // whatever code here to open the edit box 
}); 

요소가 동적으로 생성하는 경우 .on를 사용하여 클릭 이벤트에 바인딩 할 수 있습니다 :

$('body').on('click', elementThatOpensTheEditBox, function(e){ 
    e.preventDefault(); 
    e.stopPropagation(); 

    // whatever code here to open the edit box 
}); 

Answer 2

jQuery를 사용하여 이벤트 위임 ($.on()) :

<a href="http://www.yahoo.com/" id="outer"> 
    <p>Click in the blue to follow the link</p> 
    <p id="inner">I am inner to the link</p> 
</a> 

var $outer = $('#outer'); 

$outer.on('click', '#inner', function prevent(e){ 
    console.log('Inner clicked.'); 
    e.preventDefault(); 
}); 

http://jsfiddle.net/userdude/fYPnu/2

을 그리고 평범한 자바 스크립트 :

var inner = document.getElementById('inner'); 

inner.addEventListener('click', function prevent(e){ 
    console.log('Inner clicked.'); 
    e.preventDefault(); 
}); 

http://jsfiddle.net/userdude/fYPnu/1

주, IE8 <와 이전 버전과의 호환성을 위해, 당신은뿐만 아니라 .attachEvent()에 대한 감지해야합니다.