event.preventDefault 대 event.stopPropagation

Question

누군가 event.preventDefault()과 event.stopPropagation()의 차이점을 설명 할 수 있습니까?

나는 테이블이 있으며 테이블 내에 img 태그가 있습니다.

img 태그를 클릭하면 팝업이 표시됩니다.

하지만 여러 행의 선택을 중지하려면, 그래서 내가 사용 :

내가 JS 코드를 사용

$("table.items tbody tr").click(function(event) { 
     event.stopPropagation(); 
    }); 

, 팝업이 표시되지 않습니다;

js 코드를 삭제하면 팝업이 작동합니다.

$(".info").live("click",function(e){ 
    //console.log('ok'); 
    e.stopPropagation(); 
    var elem = $(this); 
    var id = $(this).attr("id").replace("image_","container_"); 
    $('#'+id).toggle(100, function() { 
     if($(this).css('display') == 'block') { 
      $.ajax({ 
       url: "$url", 
       data: { document_id:elem.attr('document_id') }, 
       success: function (data) { 
        $('#'+id).html(data); 
       } 
      }); 
      } 
     }); 
}); 

왜?

Answer 1

나는 자바 스크립트 전문가가 아니라고하지만 내가 아는 한 :

stopPropagation

확실히 이벤트가 버블 링 체인을하지 않는 만드는 데 사용됩니다. 예. <td> 태그를 클릭하면 해당 부모의 클릭 이벤트 ( <tr>)가 발생하고 그 다음에 부모 <table> 등이 표시됩니다. stopPropagation은 이러한 일이 발생하지 않도록합니다.

preventDefault은 요소의 정상적인 작동을 중지시키는 데 사용됩니다. 링크의 클릭 핸들러에 preventDefault이 링크가 따라 가기를 멈추거나 제출 버튼을 누르면 제출중인 양식이 중지됩니다.

Answer 2

이벤트 preventDefault From W3C:

에서는 event.preventDefault() 메소드에서 일어나는 소자의 기본 동작을 정지한다. 예 :

가 event.stopPropagation() 메소드의 버블 링을 중단 :

방지는 형태가 URL 다음 에서 링크 방지 제출로부터 제출 버튼 이벤트 stopPropagation From W3C

부모 이벤트 처리기가 이 실행되는 것을 방지하는 부모 요소의 이벤트. 아이에

Answer 3

• stopPropagation 아이에 이벤트를 중지하는 아이에 부모 (전체 조상)
• preventDefault에서 일어나는에서 해당 이벤트를 중지하지만 합니다 학부모 (및 조상도 마찬가지 임)

이제 코드가 부모입니까? 아이는 무엇입니까?img은 자식입니다 tr은 부모입니다 (솔직히 조부모님입니다). 따라서 stopPropagation 코드가 있어야 할 위치를 추측합니다.