javascript处理鼠标事件_Javascript

javascript处理鼠标事件

javascript

javascript处理鼠标事件,javascript,Javascript,我怎样才能在鼠标点击的情况下拖动图像，而不是像现在这样跟着鼠标 <head> <style> #flying { position: absolute; } </style> <script type="text/javascript"> function UpdateFlyingObj (event) { var mouseX = Math.round (event.clientX);

我怎样才能在鼠标点击的情况下拖动图像，而不是像现在这样跟着鼠标

<head>
<style>
    #flying {
        position: absolute; 
    }
</style>

<script type="text/javascript">
    function UpdateFlyingObj (event) {
        var mouseX = Math.round (event.clientX);
        var mouseY = Math.round (event.clientY);

        var flyingObj = document.getElementById ("flying");
        flyingObj.style.left = mouseX + "px";
        flyingObj.style.top = mouseY + "px";
 }
    this.onmouseup = function() {
    document.onmousemove = null
  }


</script>
 </head>
 <body onmousemove="UpdateFlyingObj (event);" >
<h1><center>Homework 13.7<center></h1>
<div style="height:1000px;"></div>

<img id="flying" src="flying.gif" />

</body>


#飞行{
位置：绝对位置；
}
函数UpdateFlyingObj（事件）{
var mouseX=Math.round（event.clientX）；
var mouseY=Math.round（event.clientY）；
var flyingObj=document.getElementById（“flying”）；
flyingObj.style.left=mouseX+“px”；
flyingObj.style.top=mouseY+“px”；
}
this.onmouseup=函数（）{
document.onmousemove=null
}
家庭作业13.7

需要考虑的关键点是处理图像的ondragstart事件。如果未能从中返回false，则表示浏览器吸收事件并给出异常行为。请参阅源代码中的注释

试试这个尺码。（不要忘记更改图像路径）


#飞行
{
位置：绝对位置；
}
函数byId（e）{returndocument.getElementById（e）；}
addEventListener（'load'，myInitFunc，false）；
函数myInitFunc（）
{
byId（'flying'）。addEventListener（'mousedown'，onImgMouseDown，false）；
}
函数onImgMouseDown（e）
{
e=e | |事件；
var mElem=这个；
var initMx=e.pageX；
var initMy=e.pageY；
var initElemX=this.offsetLeft；
var initElemY=this.offsetTop；
var dx=initMx-initElemX；
var dy=initMy-initElemY；
document.onmousemove=函数（e）
{
e=e | |事件；
mElem.style.left=e.pageX-dx+'px'；
mElem.style.top=e.pageY-dy+'px'；
}
this.onmouseup=函数（）
{
document.onmousemove=null；
}
//试着注释掉下面的一行
//这样做意味着浏览器吸收ondragstart事件，并（在Chrome中）拖动一个不透明度降低的副本
//图像上覆盖有一条对角线的圆圈。-就像
//在网页上拖动图像。
this.ondragstart=函数（）{return false；}
}
家庭作业13.7

<!DOCTYPE html>
<html>
<head>
<style>
#flying 
{
    position: absolute; 
}
</style>

<script>
function byId(e){return document.getElementById(e);}

window.addEventListener('load', myInitFunc, false);

function myInitFunc()
{
    byId('flying').addEventListener('mousedown', onImgMouseDown, false);
}

function onImgMouseDown(e)
{
    e = e || event;
    var mElem = this;
    var initMx = e.pageX;
    var initMy = e.pageY;
    var initElemX = this.offsetLeft;
    var initElemY = this.offsetTop;

    var dx = initMx - initElemX;
    var dy = initMy - initElemY;

    document.onmousemove = function(e)
    {
        e = e || event;
        mElem.style.left = e.pageX-dx+'px';
        mElem.style.top = e.pageY-dy+'px';
    }
    this.onmouseup = function()
    {
        document.onmousemove = null;
    }

    // try to comment-out the below line
    // doing so means the browser absorbs the ondragstart event and (in Chrome) drags a reduced-opacity copy of
    // the image, overlaid with a circle that has a diagonal line through it. - just like the usuall behaviour for
    // dragging an image on a webpage.
    this.ondragstart = function() { return false; }
}

</script>
 </head>
 <body>
    <h1><center>Homework 13.7<center></h1>
    <img id="flying" src="img/opera.svg"/>
</body>
</html>