Firefox 이상한 클릭 이벤트 버블 링 동작

Question

firefox에서 자식 노드를 마우스 오른쪽 버튼으로 클릭 할 때 문서 노드에서 click 이벤트가 발생하는 이상한 문제가 발생했습니다. http://jsfiddle.net/RyDZU/5/

업데이트 버전 : http://jsfiddle.net/RyDZU/10/

$(document).on("click","span",function(e) { 
    console.log('span'); 
    console.log(e.isPropagationStopped()); 
}); 

$(document).on("click","div",function(e) { 
    console.log('div'); 
    console.log(e.isPropagationStopped()); 
    e.stopPropagation(); 
    console.log(e.isPropagationStopped()); 
}); 

$(document).on("click",function(e) { 
    console.log('body'); 
    console.log(e.isPropagationStopped()); 
}); 

HTML : < 사업부 > < 범위 > 테스트 </스팬 > </DIV >

당신이 만약

이 코드는 문제를 보여 wor를 마우스 오른쪽 단추로 클릭하십시오. d "test"는 "body"라는 단어가 firefox (21)의 콘솔에 출력됩니다. IE 10/Chrome에는 없습니다.

Firefox에서이 이벤트가 발생하지 않도록하려면 어떻게해야합니까?

이 작동하지 않습니다

$("body").on("click", "span", function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
}); 

Answer 1

이 스크립트에서

$(document).on("click",function(e) { 
    console.log('body'); 
    console.log(e.isPropagationStopped()); 
}); 

첫 핸들러를합니다. 당신이 그것을 할 때, 문서 클릭 핸들러는 span과 div 핸들러를 숨기고 있습니다.

Answer 2

동일한 문제가 있습니다. 나는 당신이 green square에서 click을 클릭하면 이벤트는 핸들러 2 (div에 있음)와 핸들러 3 (document에 있음)에 의해 처리됩니다. 그러나 마우스 오른쪽 버튼을 클릭하면 handler3 만 호출됩니다. 즉 div의 오른쪽 클릭에 대한 전파를 중지하는 쉬운 방법이 없습니다.

// requisite jsfiddle code snippet 
function handler2() { 
    console.log('in handler2'); 
} 

function handler3() { 
    console.log('in handler3'); 
} 

$(document).ready(function() { 
    $('#block2').on('click', handler2); 
    $(document).on('click', handler3); 
}); 

jsfiddle

는 또한 dom.event.contextmenu.enabled 및 services.sync.prefs.sync.dom.event.contextmenu.enabled 설정으로 주위를 연주했지만, 그들은 효과에 없었다 이 행동.

Answer 3

event.which을 사용하여 어떤 마우스 단추를 눌렀는지 (문서에 첨부 된 이벤트 수신기에서) 확인할 수 있습니다. https://stackoverflow.com/a/12430795/1170489을 참조하십시오.