获取IE与FF中鼠标坐标

据资料显示,IE中获取鼠标坐标的事件属性有以下几个:

clientX设置或获取鼠标指针位置相对于 窗口客户区域的x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
clientY设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。
offsetX设置或获取鼠标指针位置 相对于触发事件的对象的 x 坐标。
offsetY设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
screenX设置或获取获取鼠标指针位置相对于 用户屏幕的x 坐标。
screenY设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
x设置或获取鼠标指针位置相对于 父文档的 x像素坐标。
y 设置或获取鼠标指针位置相对于父文档的y 像素坐标。

( 经过测试,发现x跟clientX, y跟clientY一致 )

据资料显示,FF中获取鼠标坐标的事件属性有以下几个:

clientX设置或获取鼠标指针位置相对于 窗口客户区域的x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
clientY设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。
screenX设置或获取获取鼠标指针位置相对于 用户屏幕的x 坐标。
screenY设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
pageX / layerX  
设置或获取鼠标指针位置相对于父 文档的 x像素坐标。
pageY / layerY  设置或获取鼠标指针位置相对于父文档的 y 像素坐标。

(经过测试,发现page跟layer就像相对定位与<body>一样,等于 client+滑动距离

自己写了个小js测试下,点击红色区域的时候,获取对应坐标填写到对应的input中,下面是截图:

https://img-my.csdn.net/uploads/201401/02/1388633399_1520.png

这个是IE8的截图,红色的点数鼠标点击的大概位置,黑色的线条表示client的坐标距离, 绿色的表示offset, 橙色表示screen.

https://img-my.csdn.net/uploads/201401/02/1388633399_8905.png

这个是FF的截图,红色的点数鼠标点击的大概位置,黑色的线条表示client的坐标距离, 粉色的表示page/layer, 橙色表示screen.

这样看感觉page/layer跟client一样,所以我做多一张图:

获取IE与FF中鼠标坐标
当滑动条滑动时,元素上升,点击时候,client会根据窗口来定,但是page/layer却依然相对于<body>就像图里面画的一样, 它的坐标等于client+滑动距离
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ava实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),可运行高分资源 Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现
three.js是一款用于创建WebGL渲染的JavaScript库,它可以在浏览器实现动态的、交互式的三维图形。 要获取鼠标点击的三维位置,可以遵循以下步骤: 1. 创建一个three.js场景。 2. 创建一个相机,并将其放置在合适的位置和方向,以便你可以从正确的角度观察场景。 3. 创建一个WebGL渲染器,将其连接到你想要显示场景的HTML元素上。 4. 创建一个射线投射器(raycaster)对象,并根据相机和鼠标点击的位置来定义射线。 5. 使用射线投射器来检测与场景的物体的交互。 6. 如果射线与物体相交,则可以获取交点的坐标,从而得到三维位置。 下面是一个示例代码来实现上述过程: ```javascript // 创建场景 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建一个立方体作为示例物体 var geometry = new THREE.BoxGeometry(1, 1, 1); var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); var cube = new THREE.Mesh(geometry, material); scene.add(cube); // 创建一个射线投射器 var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); // 监听鼠标点击事件 function onMouseClick(event) { // 将鼠标点击位置转换为标准化设备坐标 mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; // 通过相机和鼠标点击位置定义射线 raycaster.setFromCamera(mouse, camera); // 计算射线与物体的相交情况 var intersects = raycaster.intersectObjects(scene.children); if (intersects.length > 0) { // 获取交点的坐标 console.log(intersects[0].point); } } // 将鼠标点击事件监听绑定到dom元素上 document.addEventListener('click', onMouseClick, false); // 渲染场景 function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); ``` 在这个示例,我们创建了一个立方体物体,并通过监听鼠标点击事件来获取点击位置的三维坐标。射线投射器检测到射线与物体的相交情况,如果有交点存在,我们就输出交点的坐标。 希望上述解答对您有帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值