브라우저 이벤트가 거품을 울리지 않습니다.

Question

요소로 드래그 드롭을 만들고 싶습니다.이 요소의 부모가 클릭 또는 드래그 이벤트를 캡처하지 않기를 원하므로 풍선 모델을 사용하지만 드래그 할 요소는 사용합니다. 이 요소의 크기 (너비, 높이, 왼쪽 ...)를 소유 한 자식을 포함합니다. 예를 들어

:

<div id="div_con" style="left: 20px; top: 50px; width: 181px; height: 357px; position: absolute; z-index: 10; cursor: pointer;" class="drag"> 
    <img src="test.PNG" id="Over_Label_1912694_Img" style="left: 0px; top: 0px; width: 181px; height: 357px; position: relative;"> 
</div> 

DIV 번호의 div_con 내가 드래그 할 요소이다. 그러나 div # div_con과 img의 크기가 같으므로 사용자는 절대로 div # div_con을 클릭 할 수 없습니다. img가 그 위에 있기 때문에. 사용자가 MouseDown 이벤트가 버블 #의 div_con를 div에하는 것 DIV 번호의 div_con 아래에있는 IMG를 클릭하면

는 그래서, 전체 문서 제 생각에는

document.onmousedown = OnMouseDown; 
document.onmouseup = OnMouseUp; 

에 mouseDown, mouseMove 나, mouseUp 이벤트를 바인딩합니다.

난 그냥 사업부 번호의 div_con를 드래그 할, 그래서이 이는 MouseDown 핸들러에 체크하기 때문에 :

if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'drag') 
{ //do the start the move} 

을하지만이 작동하지 않습니다.

이 완벽한 예입니다

http://jsfiddle.net/5SCwG/

Answer 1

그러나 버블 링됩니다. 이것이 바로 문서가 시작하는 이벤트를 수신하는 이유입니다. 발생한 문제는 event.target이 클릭 된 개체를 참조하고 event.currentTarget이 수신 대기중인 개체를 참조하며 그 중 하나도 해당 div가 아닌 것입니다.

div에서 이벤트 리스너를 직접 사용해야하거나 target.parentElement을 가져와 _dragElement로 사용해야합니다.

Check it out.

Answer 2

당신이 DIV의 background-image 같은 이미지를 지정하고 IMG 드래그에게 & 드롭을 제거하면 작동 : http://jsfiddle.net/HxaJ4/