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

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, 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.

Проверьте.

Answer 2

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