JavaScript获取鼠标控制权

最新推荐文章于 2024-06-19 11:45:51 发布
最新推荐文章于 2024-06-19 11:45:51 发布
阅读量1k 收藏 2
点赞数 1
分类专栏： HTML5 文章标签： Pointer Lock API 鼠标控制视角 HTML5 WebGL
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39438086/article/details/95117773
版权

如果使用HTML5开发游戏或者VR博物馆之类的应用，常常需要获取鼠标的控制权，也就是说简单地通过鼠标的移动来控制视角的旋转。

直接使用监听mousemove事件是不可行的，因为当鼠标移动到浏览器或元素的边缘的时候，鼠标不能再移动，mousemove中鼠标的位置也不会再移动。

这个可以通过Pointer Lock API / 指针锁定API来完成，它的使用很简单，只需要在某个事件监听器中（必须在某个事件监听器中调用，否则无效）调用canvas.requestPointerLock()即可，比如下面的代码就是在canvas被点击后获取鼠标的控制权。

canvas.addEventListener("click", ev => {
   
   canvas.requestPointerLock
最低0.47元/天 解锁文章
I am zzxn
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 各种鼠标光标控制示例
01-22
JavaScript 各种鼠标光标控制示例，直接打开示例文件看演示，编辑文件看示例代码，很简单
cursor属性 鼠标指针放在元素范围内时的光标形状
Gamin
11-06 717
/*默认 浏览器设置的光标*/ cursor: auto; cursor属性 url 需使用的自定义光标的 URL。 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 default 默认光标（通常是一个箭头） auto 默认。浏览器设置的光标。 crosshair 光标呈现为十字线。 pointer 光标呈现为指示链接的指针（一只手） move 此光标指示某对象可被移动。 e-re..
使用JavaScript实现Pointer Lock
最新发布
lostdeer
06-19 354
Pointer Lock API允许游戏开发人员锁定光标在游戏中，这对于第一人称视角的游戏尤其有用。它允许游戏更好地控制鼠标移动，防止鼠标移动超出浏览器窗口，从而提供更流畅的体验。通过使用Pointer Lock API，我们可以更好地控制游戏中的鼠标移动，并提供更流畅的体验。通过本文提供的示例，您可以轻松地在自己的项目中实现Pointer Lock。
html 鼠标跟随
qq_45627570的博客
09-23 275
<style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; /* * 开启box1的绝对定位 */ position: absolute; } </style> <script type="te...
JS编写鼠标操作
天飓的技术博客
03-05 1233
通过上一篇博文《JS编写键盘操作&禁用键盘》，我们可以用键盘的方向键来操控动画人物行走。光用键盘操作还不过瘾？那就再加一个鼠标操作吧。鼠标操作的目标有两个：1、可以抓取动画人物并移动；2、单击鼠标左键，让动画人物上下左右行走。先来实现第一个目标，代码如下： function mouse_ctrl(){ //鼠标控制 var obj=document.getElementById("ai...
使用 JavaScript 将鼠标指针移动到特定位置
six6de6的博客
08-23 7308
使用 JavaScript 将鼠标指针移动到特定位置
JavaScript取得鼠标绝对位置程序代码介绍
10-27
本文将详细介绍如何在不同浏览器环境下通过JavaScript获取鼠标绝对位置的方法。 首先，我们需要了解不同浏览器对于鼠标事件对象(event object)中的位置属性的处理差异。在Internet Explorer（IE）中，`event.x` 和 ...
Javascript tooltip
09-15
例如，使用库如jQuery UI或Bootstrap可以快速实现复杂的tooltip功能，但自定义的解决方案则提供了更大的灵活性和控制权。理解和掌握这些基础概念，将有助于你在实际开发中创建出满足特定需求的高效且用户体验良好的...
javaScript小广告
06-03
通过创建XMLHttpRequest对象，我们可以向服务器发送请求，获取新的广告数据，并使用JavaScript更新页面。 5. 事件监听与响应 JavaScript可以监听用户的各种交互事件，如点击、滚动、鼠标悬停等。这些事件可以触发...
javascript小技巧合集
05-30
描述：本文将详细介绍一系列实用的JavaScript技巧，这些技巧涵盖了从基本的用户交互到更复杂的页面控制，旨在帮助开发者优化用户体验，增强网站安全性，并提升开发效率。 ### 重要技巧概览 #### 屏蔽鼠标右键 通过...
pointer-lock-plugin:Pointer Lock 插件可让您快速轻松地访问 KiwiJS 游戏中的指针锁定功能。 指针锁定是一个有用的浏览器功能。 它冻结鼠标的位置，隐藏光标，并报告所有鼠标移动。 这样你就可以在任何方向任意移动鼠标任意距离，而不会碰到屏幕边缘
06-26
指针锁定插件 版本：0.1.0 类型：输入 作者：Kiwi.js 团队的 Benjamin D. Richards 网站： Kiwi.js 最后测试版本：1.1.1 版本 去做 检测并报告浏览器是否支持指针锁定 0.1.0 插件已创建 文件/文件夹 README.md - 这个自述文件。 gruntfile.js - 使用适当内容填充“dist”和“docs”文件夹的构建文件。 package.json - grunt 构建所需的节点包以及构建时要使用的 gruntfile 的信息。 docs/ - yuidocs 生成的文档。 examples/ - 插件示例。 src/ - 插件的源文件。 描述 Pointer Lock 插件可让您快速轻松地访问游戏中的指针锁定功能。 指针锁定是一个有用的浏览器功能。 它冻结鼠标的位置，隐藏光标，并报告所有鼠标移动。 通过这种方式，
parse-js:解析js基本逻辑
06-06
6. **事件处理**：JavaScript在网页中常用于处理用户事件，如点击按钮（click）、鼠标悬停（mouseover）等。通过`addEventListener`方法，我们可以将函数绑定到这些事件上，实现响应式编程。 7. **DOM操作**：...
js控制鼠标移动_原生JS封装可拖拽效果
weixin_39897887的博客
12-03 493
项目代码已上传码云：小朋友/JavaScript 封装可拖拽特效访问该URL可查看效果：http://is666a.gitee.io/javascript_drag/https://www.zhihu.com/video/1242767090983059456封装好的 JS 代码：/** 写代码的思路：思路还是比较简单的，没有用到任何算法，就是之前所说的盒子跟随鼠标移动。 CSDN：https:...
(九)Javascript事件分类(含JS实现固定定位)
weixin_51458883的博客
03-26 788
(九)事件分类 目录(九)事件分类鼠标事件键盘事件keydown keyup keypress文本操作事件(含输入框的实现)==实现一般页面中输入框的实现==窗体操作类(window上的事件)scroll==load==Js实现固定定位 鼠标事件 click、mousedown、mousemove、mouseup、contextmenu、mouseover、mouseout、mouseenter、mouseleave 查看鼠标各个点的坐标 注意，这里的前缀是document <body
clientX&&screenX&&offsetX&&pageX
胡图图的博客
12-13 196
1. MouseEvent.clientX，MouseEvent.clientY 说明 MouseEvent.clientX属性返回鼠标位置相对于浏览器窗口左上角的水平坐标（单位px），MouseEvent.clientY返回**垂直坐标。**这两个属性都是只读属性。 2. MouseEvent.screenX，MouseEvent.screenY 说明 MouseEvent.screenX属性返回鼠标位置相对于屏幕左上角的水平坐标（单位像素），MouseEvent.screenY属性返回垂直坐标。这两个属
Pointer Lock API
lio-zero 的博客
05-28 245
Pointer Lock API 用于提供对原始鼠标移动的访问，将鼠标事件的目标锁定到单个元素，消除鼠标移动在单个方向上的距离限制，并从视图中移除光标。常用在第一人称或实时策略游戏。 以下 Can I Use 对 Pointer Lock API 的支持情况： Pointer Lock API 的支持情况 方法 通过添加 requestPointerLock 新方法来扩展 DOM 元素。...
一、JavaScript入门
weixin_62976579的博客
04-18 977
非常详细的JavaScript讲解，持续更新中
使用 javascript 将鼠标指针移动到特定位置
迹忆客
07-01 2006
没有使用 JavaScript 更改鼠标位置的直接方法，因为它有一些缺陷。但是在编程中总是有不同的和非官方的做事方式。要解决鼠标指针移动到特定位置的问题，我们必须隐藏原来的鼠标指针。然后，我们有两个创建我们的自定义鼠标指针并编写一些 JavaScript 代码使其移动到特定位置。
javascript鼠标视差
10-16
当鼠标移动时，获取鼠标在窗口中的相对位置，即鼠标相对于窗口左上角的横坐标和纵坐标。 然后，计算鼠标在水平方向上的位移量和垂直方向上的位移量。可以通过与鼠标原始位置的差值来实现。根据位移量的大小，可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值