鼠标键盘常用事件

最新推荐文章于 2024-02-28 17:01:47 发布

mewgulfszd！

最新推荐文章于 2024-02-28 17:01:47 发布

阅读量209

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/CLhen/article/details/125542508

版权

JavaScript 鼠标事件键盘事件 DOM操作 event.preventDefault

关键词由CSDN通过智能技术生成

1、禁止鼠标右键菜单 contextmenu。

document.addEventListener('contextmenu',function(){
    e.preventDafault();
})

2、禁止鼠标选中 selectstart。

document.addEventListener('selectstart',function(){
    e.preventDafault();
})

3、MouseEvent

鼠标事件对象
鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相对于文档页面的X坐标
e.pageY	返回鼠标相对于文档页面的Y坐标
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

4、keyboardEvent

常用键盘事件
键盘事件	触发条件
onkeyup	某个键盘按键松开时触发
onkeydown	某个键盘按键按下时触发
onkeypress	某个键盘按键按下时触发，但不识别功能键，如ctrl、shift等。

三个事件的执行顺序：keydown --- keypress --- keyup。

5、key

使用key，返回具体键，区分大小写。

案例：

按下s键，input获得焦点。

<body>
    <input type="text">
    <script>
        var ipt=document.querySelector('input')
        document.addEventListener('keyup',function(e){
            console.log(e.key);
            if(e.key=='s'||e.key=='S'){
                ipt.focus()
            }
        })
    </script>
</body>

input输入内容，div同步显示。

<body>
    <div class="father">
        <div class="content">123</div>
        <input type="text" placeholder="请输入内容">
    </div>
    <script>
        var ipt = document.querySelector('input')
        var text = document.querySelector('.content')
        ipt.addEventListener('keyup', function () {
            if (!this.value) {
                text.style.display = 'none'
            } else {
                text.style.display = 'block';
                text.innerHTML = this.value
            }
        })
        ipt.addEventListener('blur',function(){
            text.style.display='none'
        })
        ipt.addEventListener('focus',function(){
            if(this.value!==''){
                text.style.display='block'
            }
        })
    </script>
</body>

不使用keydown和keypress，因为这两个事件触发的时候，文字还没有落入文本框中，而且keypress不能使用功能键，所以不能删除input里的内容。

使用keyup事件触发，文字已经落入文本框里面了。