让红色方块随着鼠标的移动而移动,绑定的事件是div 鼠标是受系统监控的也就是说系统规定了鼠标一秒可以移动多少次 同时红色也受系统监听 系统对鼠标的监听的面积高于红色方块 所以 事件监听跟不上鼠标监听 经常鼠标移出方块了 方块还没监听到 但是在document上挪 怎么挪都挪不出去
div.onmousedown = function(e)
{
disX = e.pageX -parseInt( div.style.left);
disY = e.pageY -parseInt( div.style.top);
div.onmousemove = function(e)//绑定的事件是div 鼠标在div上挪动才好使 但是鼠标是受系统监控的 但对事件的监听少于鼠标 事件跟不上鼠标
{
var event = e || window.event;
console.log(e.pageX + "" + e.pageY);
div.style.left = e.pageX -disX + "px" ;
div.style.top = e.pageY - disY+ "px";
}
div.οnmοuseup= function(e)
{
div.onmousemove = null;//
}
但是屏幕上只有一个方块,如果同时有两个方块,为了达到跟上鼠标的速度,都采用了以上的方式,两者能使用同一个document,不会冲突吗?所以我试验了一下
<body>
<div style="width: 100px;height: 100px;background-color: red;position: absolute;left: 0;top: 0;"></div>
<div style="width: 100px;height: 100px;background-color: forestgreen;position: absolute;left: 500px;top: 500px;"></div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
var div1 = document.getElementsByTagName('div')[1];
var disX ,disY; //鼠标刚点上图片的位置,此后移动位置也要在那 因为方块的位置刚开始是鼠标移动的位置
//并且方块设置的是靠左靠上 所以鼠标会一直在方块靠左靠上的位置,因此需要将方块设置成比实际位置移动少一些 这样鼠标才能在方块内容区的位置
//而我们又想让鼠标的位置从点上之后即使在后面移动也不变,所以这个少移动的位置就需要固定 也就是刚开始点击下的鼠标位置减去
document.onmousedown = function(e)
{
disX = e.pageX -parseInt( div.style.left);
disY = e.pageY -parseInt( div.style.top);
document.onmousemove = function(e)//绑定的事件是div 鼠标在div上挪动才好使 但是鼠标是受系统监控的 但对事件的监听少于鼠标 事件跟不上鼠标
{
var event = e || window.event;
console.log(e.pageX + "" + e.pageY);
div.style.left = e.pageX -disX + "px" ;
div.style.top = e.pageY - disY+ "px";
}
document.onmouseup= function(e)
{
document.onmousemove = null;//
}
}
document.onmousedown = function(e)
{
disX = e.pageX -parseInt( div1.style.left);
disY = e.pageY -parseInt( div1.style.top);
document.onmousemove = function(e)//绑定的事件是div 鼠标在div上挪动才好使 但是鼠标是受系统监控的 但对事件的监听少于鼠标 事件跟不上鼠标
{
var event = e || window.event;
console.log(e.pageX + "" + e.pageY);
div1.style.left = e.pageX -disX + "px" ;
div1.style.top = e.pageY - disY+ "px";
}
document.onmouseup= function(e)
{
document.onmousemove = null;//
}
}
</script>
</body>
即使我点了红色方块也毫无反应 ,只有点绿色方块时才会移动
暂时我还没找到原因,后续解决了再更新