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
- javaScript小问题,托拽元素,获得当前鼠标的坐标
- 获得当前鼠标的坐标
- javaScript , Jquery中如何获得当前鼠标指向的元素
- 如何获得当前鼠标的坐标。
- Javascript获得鼠标点击图片的坐标
- javascript获得鼠标的坐标值
- javascript中获取当前鼠标的坐标
- javascript中获取当前鼠标的坐标
- javascript如何通过鼠标左击获得当前元素ID
- C# 获得当前鼠标的屏幕中间坐标(c#)
- javaScript获得鼠标点击图片处的坐标
- js获得鼠标的坐标
- winform 获得鼠标的坐标
- winfrom获得鼠标的坐标
- javascript获得DOM元素X,Y坐标的函数
- 获取当前鼠标的坐标
- javaScript获取当前鼠标坐标值
- JavaScript获取当前鼠标指针坐标
- 顺序链表的实现
- linux/ubuntu 端口开放
- 关于android输入法问题
- ubuntu 10.04下设置pythonpath
- 文件系统
- javaScript小问题,托拽元素,获得当前鼠标的坐标
- Wifi小车之 - 最终版
- 触摸事件UITouch
- 进程地址空间分布
- Office - How do I change user name of Office for Mac 2011
- 兼容最好的设为首页加入收藏代码
- Retrofit2 初探:入门及其使用 完全解析
- application loader 上传app
- java MD5摘要