JavaScript divを動かす イベントの重なり

Question

ドラッグでdivを動かすものを作ってます
赤いボックスにinput rangeを置いたんですが、
rangeのつまみを動かすと同時にdivの動きも発生してしまいます
赤いつまみを動かしてる場合divの動き発生させなくすることはできますか？

リンク内容
この辺りを見ていますが今一よくわかりません

<div id="a" style="position:absolute;width:200px;height:200px;background:red;"></div>

<script>
window.onload=function(){
var range = document.createElement('input');
range.type = "range";
range.value = "0";
range.style.width = "200px";
range.style.height = "30px";
a.appendChild(range);

}
var flag=0;
var offsetX = 0;
var offsetY = 0;
a.onmousedown=function(e){
flag=1;
offsetX = e.offsetX;
offsetY = e.offsetY;
}
a.onmousemove=function(e){
if(flag==1){
a.style.left = e.clientX - offsetX + "px";
a.style.top = e.clientY - offsetY + "px";
}
}
a.onmouseup=function(){
flag=0;
}
</script> 

Answer 1

onmousedown のハンドラ内で、e.target が a と等しくなかったら何もしないようにします。

Comments

[退会済みユーザー]

ヒントありがとうございます

<div id="a" style="position:absolute;width:200px;height:200px;background:red;"></div>

<script>
window.onload=function(){
var range = document.createElement('input');
range.type = "range";
range.value = "0";
range.style.width = "200px";
range.style.height = "30px";
a.appendChild(range);

}
var flag=0;
var offsetX = 0;
var offsetY = 0;
a.onmousedown=function(e){
if(e.target.id!="a"){
flag=1;
offsetX = e.offsetX;
offsetY = e.offsetY;
}
}
a.onmousemove=function(e){
if(flag==1){
a.style.left = e.clientX - offsetX + "px";
a.style.top = e.clientY - offsetY + "px";
}
}
a.onmouseup=function(){
flag=0;
}
</script>

このようにしましたが、目的の動作に達する事ができていません
書き方が違うのでしょうか

[退会済みユーザー]

アホな事してました
できました
ありがとうございます

[int32_t]

判定が逆ですね。このコードだったら e.target.id != "a" ではなく e.target.id == "a" でしょう。