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

#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;
                }}

javaScript小问题，托拽元素，获得当前鼠标的坐标相关推荐

js 拖拽元素鼠标速度过快问题
自己写一个小工具,使用js拖拽元素时,鼠标速度过快时元素跟不上鼠标看网上有人说把mousemove事件绑定到dom上试了不管用偶然发现拖拽文字丝毫无卡顿不知道是不是元素比较复杂的缘故? s ...
js 拖拽元素鼠标速度过快元素跟不上
自己写一个拖拽元素,使用js拖拽元素时,鼠标速度过快时元素跟不上鼠标参考了网上的文章 ,里面对比了绑定到 body和document上的不同点js 拖拽元素鼠标速度过快问题明白过来是因为速度过 ...
javascript小实例，PC网页里的拖拽（转）
这是现在的效果,可能改了一些,原来的效果是,里面的这张图是可以上下左右拖动的,然后房子上面的显示的楼栋号,也跟着图片一起移动,当时js能力还不行,未能实现项目经理的要求,不过后来项目经理又把这个效果推 ...
javascript小技巧-500例
搜集的一些javascript小技巧!事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCap ...
常用的一些javascript小技巧(收藏http://www.car371.com/article.asp?id=13)
常用的一些javascript小技巧作者:隆轩日期:2005-12-21 字体大小: 小中大 //事件源对象 event.srcElement.tagName event.srcElement ...
JavaScript小案例程序保存（完整代码+效果展示）
1.案例--点击button换照片 html部分 <!DOCTYPE html> <html lang="en"> <head><meta ...
javascript小技巧！
搜集的一些javascript小技巧! 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCa ...
搜集的一些javascript小技巧！
搜集的一些javascript小技巧! 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCa ...
javascript小技巧JavaScript[对象.属性]集锦（转自飛雪飄寒）
javascript小技巧&&JavaScript[对象.属性]集锦,建议你 ctrl+F 直接在这个页上找,因为这里80%有你要找的! javascript小技巧事件源对象 ev ...

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

javaScript小问题，托拽元素，获得当前鼠标的坐标相关推荐

最新文章

热门文章