js 다른 요소에서 마우스 이벤트 충돌을 피하는 방법

Question

자바 스크립트 학습으로, 필자는 웹 페이지를 '그래픽으로'(드림위버 스타일) 만들 수있는 작은 앱을 만들었습니다. 별도의 스크립트로 기본 사용자 정의 메뉴와 메시지 팝업을 추가했습니다. 메뉴는 document.body에 바인드 된 왼쪽 마우스 클릭에서 열리 며, 팝업이 포함 된 페이지 어디에서나 (물론 존재한다면). 그러한 행동을 피할 수있는 방법이 있습니까?

편집

다음

팝업에 드래그 작업을 처리하는 기능에 대한 (거친) 코드 :

window.addEventListener('click', show_mnu, false); // Menu onclick event (simply shows the menu onscreen) 

mb_hdr.addEventListener('mousedown', drag, false); // Popup event handlers 
document.addEventListener('mouseup', drag, false); // 


var dragOffsetX, dragOffsetY; 
function drag(evt) 
{ 
    var evt = evt||window.event; 
    var target = document.getElementById('popup'); 

    switch(evt.type) 
    { 
     case 'mousedown': 
     { 
      dragOffsetX = evt.clientX - target.offsetLeft; 
      dragOffsetY = evt.clientY - target.offsetTop; 
      document.addEventListener('mousemove', drag, false); 
      break; 
     } 
     case 'mouseup': 
     { 
      dragOffsetX = dragOffsetY = null; 
      document.removeEventListener('mousemove', drag, false); 
      break; 
     } 
     case 'mousemove' : 
     { 
      if(dragOffsetX && dragOffsetY) 
      { 
       target.style.left = (evt.clientX - dragOffsetX) + 'px'; 
       target.style.top = (evt.clientY - dragOffsetY) + 'px'; 
      } 
      break; 
     } 
    } 
    evt.stopPropagation(); //???? 
} 

Answer 1

난 당신이 이미 의견의 링크에서 이벤트 버블 링 및 전파에 대해 읽어 가정 귀하의 질문에 : 어떤 요소를 클릭하면 해당 이벤트는 윈도우에 도달 할 때까지 아래쪽으로 전파되고 그 핸들은 show_mnu 처리기로 전달됩니다.

이 전파를 취소하려면, 당신은 모든 mousedown이 핸들러에게

function stop(e) { 
    e.stopPropagation(); 
    (e||event).cancelBubble = true; // if you need to support IE<9 
} 

추가와 mouseUp하고 아래로 전파하는 당신이 원하지 않는 핸들러를 클릭해야합니다.

the fiddle을 참조하십시오. 회색 상자를 클릭하면 창 전파가 중단됩니다.

주 당신은 드래그에게 & 드롭을 구현하려는 경우가 supported well on desktop systems이다 HTML5 기능을 사용하기 때문에, 당신은 this tutorial 유용 할 수 있습니다.