DOM 键盘事件和指定元素的鼠标选择和移动

最编程 2024-07-01 10:59:55

...

「这是我参与2022首次更文挑战的第20天，活动详情查看：2022首次更文挑战」

一. 键盘事件

要操作键盘事件就需要获取键盘按键的位置，点击后按键后触发，松开后结束事件。

1. 这里我们使用关键词：

onkeydown 键盘被按下被按下会一直触发

onkeyup 键盘被松开只会触发一次

这两个关键词往往会同时使用，有触发就有结束

2.键盘事件一般都会绑定给一些获取焦点的对象或者是document

下面我们来演示一下：

document.onkeydown = function(event){
              if(event.keyCode === 89 && event.altKey){
                    alert('被按下');
                }
            };

这里我们可以通过keyCode获取按键编码，每个按键的编码不一样，这个需要按照键盘的生产标准还查看按键编码

keyCode事件对象中的其它属性 altKey ctrlKey shiftKey 用来判断alt ctrl shift 是否被按下

document.onkeyup  =function(){
            alert('松开了');
            };

onkeyup 松开后触发提示（松开了）；

二.使用鼠标移动元素

实现使用鼠标拖拽移动。 在DOM中同样是需要获取鼠标的运动状态，然后将鼠标状态绑定在需要移动的元素上

在这里我们使用到了三个属性：

-onmouseup 鼠标被固定当前位置

-onmousemove 鼠标被移动

-onmousedown 鼠标被按下

如下我们创建一个100*100的盒子为例，元素盒子就自己创建这里只讲解鼠标事件

window.onload = function(){
             var box = document.getElementById('box');
             box.onmousedown = function(){        
                document.onmousemove = function(event){
                    event = event || window.event;
                    
                    //获取鼠标坐标
                    var left = event.clientX;
                    var top = event.clientY;

                    //修改box位置
                    box.style.left = left+"px";
                    box.style.top = top+"px";
                };
             };
             document.onmouseup = function(){
                 document.onmousemove = null;
             };
             return false;
        };

首先实现按下鼠标，这时我们要做的事就是获取鼠标的位置,分别获取x轴和y轴的坐标。

var left = event.clientX; var top = event.clientY;

我们获取到鼠标的坐标后紧接着就是要修改元素的位置。如下我们将鼠标移动后的位置绑定元素在页面中的坐标就可以实现利用鼠标控制元素的移动。单位是“px”。

box.style.left = left+"px"; box.style.top = top+"px";

上面我们实现了鼠标的按下移动，最后要做的是当我们松开鼠标后让元素固定到我们鼠标当前的位置。就需要用到onmouseup

document.onmousemove = null;

松开鼠标后让onmousemove为null就可以了

上一篇： css 实现元素跟随鼠标旋转的效果（看板少女效果）

下一篇： 34.UE5 RPG 实现鼠标点击移动 - 在帧循环中自动移动