javaScript小问题,托拽元素,获得当前鼠标的坐标

来源:互联网 发布:网络对讲机软件 编辑:程序博客网 时间:2024/06/06 11:41
#div1,#div3{    width: 400px;    height: 400px;    position: absolute;    left:400px;    top:100px;    border:2px solid red;    perspective: 0px;
今天希望在#div1上面添加事件
var oDiv1=document.getElementById("div1");
  oDiv1.onclick=function(){//              获取当前鼠标的位置              alert("nihao");              var clientX=document.documentElement.clientWidth;              alert(clientX);
但是怎样点击鼠标也没有弹出对话框,原因是#div1,和#div3重合了。
获取鼠标点击在屏幕上的坐标,这个地方在在div中添加的一个事件,当点击的时候会调用一个匿名的函数,而且匿名的函数也会调用getMousePos这个函数,我们需要注意的是函数的参数ev,而且这个函数返回的是一个数组,我们接受到之后就是一个数组,利用点来引用参数里面的对用的值
   oDiv1.onclick=function(ev){//              获取当前鼠标的位置              var arr=getMousePos(ev);                alert(arr.x+","+arr.y);            }        }        function getMousePos(event)        {            var e=event||window.event;            return {'x': e.clientX,'y': e.clientY};        }

这个函数的作用是实现托拽,只要我们获得标签对象调用这个函数,点击鼠标右键,就可以实现对元素的托拽
       function drag(oDiv) {                oDiv.onmousedown = function (ev) {                    oEve = ev || event;                    var DisL = oEve.clientX - oDiv.offsetLeft;                    var DisT = oEve.clientY - oDiv.offsetTop;                    document.onmousemove = function (ev) {                        var even = ev || event;                        var L = even.clientX - DisL;                        var T = even.clientY - DisT;                        if (L < 0) {                            L = 0;                        }//                    怎样获取可视部分的宽度                        else if (L > document.documentElement.clientWidth - 60) {                            L = document.documentElement.clientWidth - 60;                        }                        if (T < 0) {                            T = 0;                        }                        else if (T > document.documentElement.clientHeight - 60) {                            T = document.documentElement.clientHeight - 60;                        }                        oDiv.style.left = L + "px";                        oDiv.style.top = T + "px";                    }                }                oDiv.onmouseup = function () {                    document.onmousedown = null;                    document.onmousemove = null;                }            }

0 0