이벤트 버블을 멈추는 방법

Question

페이지에 두 개의 div가 있음, 바깥 쪽과 안쪽.

mousemove 이벤트를 외부 div에 바인딩합니다. 사용자가 외부 div에 mousemove하면 마우스의 clientX 및 clientY가 표시됩니다.

또한 내부 div를 드래그 할 수 있도록 여기에 live example입니다.

1) 내부 div를 드래그 할 때 외부의 mousemove 이벤트 트리거를 원하지 않습니다.

물론 내부 div를 드래그 할 때 "outer.onmousemove = null"을 설정할 수 있지만 외부 div의 이벤트가 다른 사람이 바인딩 한 이후 가장 좋은 방법이라고 생각하지 않습니다.

나는 event.cancalBubble을 사용하려고 시도하지만 작동하지 않는 것으로 보입니다.

2) 내부 div를 드래그하면 파이어 폭스에서 텍스트를 선택하고 중지하는 방법은 무엇입니까?

Answer 1

확인하기 위해 호출 할 수있는 두 가지 기능이 있습니다 이벤트 버블 중지하도록 :

event.stopPropagation(); 
event.preventDefault(); 

당신이 다음 부모 DIV 선택되는 텍스트 모두를 방지해야 그 모두를 호출해야 할 경우 선택됨.

편집 :

나는 몇 가지 문제를 참조 코드를 좀 더 자세히 보면. 우선, "외부"div에 마우스 좌표를 등록하기 위해 onmousemove 이벤트를 사용합니다. 그런 다음 onmousemove 문서를 사용하여 "inner"div로 드래그합니다. 즉, 드래그를 시작할 때 onmousemove 이벤트에 대한 전파를 중지하면 문서 노드까지 버블 링되지 않으며 마우스를 실제로 "내부"div 밖으로 드래그 할 때까지 드래그되지 않는 드래그 가능한 div가됩니다. 지역.

/* Remove this */ 
//document.onmousemove=_mouseMove; 
//document.onmouseup=_mouseUp; 

/* Add this */ 
move_ele.onmousemove=_mouseMove; 
move_ele.onmouseup=_mouseUp; 
e.stopPropagation(); 
e.preventDefault(); 

이것은 당신이 언급처럼 당신은 너무 빨리 그 드래그 할 때를 제외하고 작동하게됩니다

하나의 솔루션은 다음과 같이 전파를 중지 한 후 대신 문서의 이동 DIV에 _mouseMove 기능을 설정하는 것입니다 커서가 "내부"div 영역을 벗어나면 커서가 div 영역으로 다시 들어갈 때까지 드래그를 중지합니다.

는

또 다른 해결책은 마우스가 실제로 통해 이동하고 있는지으로 onMouseMove 이벤트은 "외부"div의에서 모든 것을 처리하는 것입니다 DIV이 같은 "내부"하지 :

out.onmousemove=function(e){ 
    /* Check to see if the target is the "outer" div */ 
    if(e.target == this){ 
     e=e==null?window.event:e; 
     note.innerHTML=e.clientX+','+e.clientY; 
    } 
} 

이것은 또한 작동합니다 비록 당신이 드래그를 시작하지 않았더라도 커서가 내부 div 위로 이동하자마자 좌표가 업데이트되는 것을 막을 것입니다.