ブラウザイベントがバブルしない

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 #conをクリックすることは決してできません。 imgはその上にあるので

だから私は、DIV＃1 div_conにバブルユーザーは、のdiv＃のdiv_con下mouseDownイベントをIMGをクリックしたときに、私の意見では

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

文書全体にmouseDownイベント、mouseMoveイベント、mouseUpイベントをしますバインドします。

私はただの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

あなたがDIVのbackground-imageとして画像を指定し、IMGドラッグ&ドロップが動作する削除する場合：http://jsfiddle.net/HxaJ4/