Java教程

JavaScript鼠标事件及案例

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

目录

 一、鼠标事件

1、鼠标事件的常用方法

（1）鼠标事件常用方法

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

（3）禁止鼠标选中：selectstart

2、鼠标事件对象

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

一、鼠标事件

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鼠标事件及案例的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航