событие браузера не пузырится

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. Так как img над ним.

Так я связываю событие MouseDown, MouseMove, MouseUp ко всему документу

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

На мой взгляд, когда пользователь нажимает IMG под DIV # div_con, событие MouseDown будет пузырь Div # div_con.

Так как я просто хочу, чтобы перетащить DIV # 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

Если указать изображение как background-image в DIV и удалите IMG перетащить & падение работы: http://jsfiddle.net/HxaJ4/