JavaScript鼠标事件及案例

2021/12/5 9:17:10

编程Tag： javascript 事件坐标鼠标触发指针 document 案例

本文主要是介绍JavaScript鼠标事件及案例，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、鼠标事件

1、鼠标事件的常用方法

（1）鼠标事件常用方法

onclick	单击鼠标左键时触发
onfocus	获得鼠标指针焦点触发
onblur	失去鼠标指针焦点触发
onmouseover	鼠标指针经过时触发
onmouseout	鼠标指针离开时触发
onmousedown	当按下任意鼠标按键时触发
onmouseup	当释放任意鼠标按键时触发
onmousemove	在元素内当鼠标指针移动时持续触发

（2）禁止鼠标右击菜单：contextmenu

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

主要控制应该何时显示上下文菜单，主要应用于程序员取消默认的上下文菜单

（3）禁止鼠标选中：selectstart

selectstart事件是鼠标开始选择文字时就会触发，如果禁止鼠标选中，需要禁止该事件的默认行为

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

2、鼠标事件对象

鼠标事件对象：MouseEvent

是跟鼠标事件相关的一系列信息的集合，可以用来获取当前鼠标的位置信息

clientX	鼠标指针位于浏览器页面当前窗口可视区的水平坐标（X轴坐标）
clientY	鼠标指针位于浏览器页面当前窗口可视区的垂直坐标（Y轴坐标）
pageX	鼠标指针位于文档的水平坐标（X轴坐标），IE 6~IE 8不兼容
pageY	鼠标指针位于文档的水平坐标（X轴坐标），IE 6~IE 8不兼容
screenX	鼠标指针位于屏幕的水平坐标（X轴坐标）
screenY	鼠标指针位于屏幕的垂直坐标（Y轴坐标）

var pageX = event.pageX || event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft)
var pageY = event.pageY || event.clientY + (document.body.scrollTop || document.documentElement.scrollTop)

3、案例（图片随着鼠标移动）

<style>
    img{
        position: absolute;
        top: 2px;
        width: 150px;
        height: 200px;
    }
</style>
<body>
    <img src="../imgs/凤霞.jpg" alt="">
    <script>
        //1、获取img对象
        var pic = document.querySelector('img');
        //2、给文档注册mousemove事件
        document.addEventListener('mousemove',function(e){
            //3、获取鼠标在页面中的坐标
            var x = e.pageX;
            var y = e.pageY;
            //4、将鼠标的坐标设置给图片
            pic.style.left = x-50+'px';
            pic.style.top = y-50+'px';
        })
    </script>
</body>

这篇关于JavaScript鼠标事件及案例的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

JavaScript鼠标事件及案例

目录

一、鼠标事件

1、鼠标事件的常用方法

（1）鼠标事件常用方法

（2）禁止鼠标右击菜单：contextmenu

（3）禁止鼠标选中：selectstart

2、鼠标事件对象

3、案例（图片随着鼠标移动）

相关编程文章

JavaScript鼠标事件及案例

目录

一、鼠标事件

1、鼠标事件的常用方法

（1）鼠标事件常用方法

（2） 禁止鼠标右击菜单：contextmenu

（3）禁止鼠标选中：selectstart

2、鼠标事件对象

3、案例（图片随着鼠标移动）

相关编程文章

（2）禁止鼠标右击菜单：contextmenu