JavaScript 鼠标事件和键盘事件

柒边形选手

已于 2022-01-23 16:33:40 修改

阅读量491

点赞数

分类专栏：笔记文章标签： javascript 开发语言

于 2022-01-17 21:15:19 首次发布

本文链接：https://blog.csdn.net/m0_55201788/article/details/122546535

版权

笔记专栏收录该内容

85 篇文章 0 订阅

订阅专栏

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

1. 禁用鼠标右键菜单 contextmenu
2. 禁止选中文字 selectstart

<body>
    我是一段不愿意分享的文字
    <script>
        document.addEventListener('contextmenu', function(e) {
                e.preventDefault();
            })

        document.addEventListener('selectstart', function(e) {
            e.preventDefault();
        })
    </script>
</body>

3. client 鼠标在可视区的x和y坐标（可观测页面）
4. page 鼠标在页面文档的x和y坐标（整个页面）
5. screen 鼠标在电脑屏幕的x和y坐标（无论页面是否占据全屏，结果相同）

<body>
    <script>
        // 鼠标事件对象 MouseEvent
        document.addEventListener('click', function(e) {

            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');

            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');

            console.log(e.screenX);
            console.log(e.screenY);

        })
    </script>
</body>

当鼠标移动到元素上时就会触发mouseenter事件类似mouseover

它们两者之间的差别是
mouseover鼠标经过自身盒子会触发，经过子盒子还会触发，mouseenter只会经过自身盒子触发

因为mouseenter不会冒泡
跟mouseenter搭配事件：鼠标离开事件mouseleave同样不会冒泡

案例：图片跟随鼠标移动

<style>
    img {
        position: absolute;
        top: 2px;
    }
</style>
<body>
    <img src="images/angel.gif" alt="">
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove', function(e) {
            // 1. mousemove只要我们鼠标移动1px 就会触发这个事件
            // console.log(1);
            // 2.核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片
            var x = e.pageX;
            var y = e.pageY;
            console.log('x坐标是' + x, 'y坐标是' + y);
            //3 . 千万不要忘记给left 和top 添加px 单位
            pic.style.left = x - 50 + 'px';
            pic.style.top = y - 40 + 'px';


        });
    </script>
</body>

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下时触发惇但是它不识别功能键比如ctrl shift箭头等

1.如果使用addEventListener不需要加on
2. onkeypress和前面2个的区别是，它不识别功能键，比如左右箭头，shift等。
3.三个事件的执行顺序是:keydown-- keypress ---keyup

<body>
    <script>
        // 常用的键盘事件
        //1. keyup 按键弹起的时候触发 
        // document.onkeyup = function() {
        //         console.log('我弹起了');
        //     }
        document.addEventListener('keyup', function() {
            console.log('我弹起了');
        })

        document.addEventListener('keypress', function() {
                console.log('我按下了press');
            })

        document.addEventListener('keydown', function() {
                console.log('我按下了down');
            })
    </script>
</body>

柒边形选手

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 鼠标事件和键盘事件

鼠标事件触发条件 onclick 鼠标点击左键触发 onmouseover 鼠标经过触发 onmouseout 鼠标离开触发 onfocus 获得鼠标焦点触发 onblur 失去鼠标焦点触发 onmousemove 鼠标移动触发 onmouseup 鼠标弹起触发 onmousedown 鼠标按下触发 ...
复制链接

扫一扫