JavaScript中的常用鼠标事件以及小天使图片拖拽

Ednburgh-

已于 2022-07-03 11:43:20 修改

阅读量149

点赞数 1

文章标签：大数据

于 2022-06-29 14:11:12 首次发布

本文链接：https://blog.csdn.net/m0_71345904/article/details/125519796

版权

1，contextmenu鼠标右键禁用

//鼠标右键菜单禁用，丧失功能，contextmenu
         document.addEventListener('contextmenu',function(e){
e.preventDefault();
       })

设置属性以后鼠标右键菜单完全失效

2，selectstart，禁止选中文字

<body>
    你好,斗罗大陆
    <script>
    
document.addEventListener('selectstart',function(e){
    e.preventDefault();

});
</script>

此时就无法选中文字了

3，获得鼠标在页面上的坐标

参数：
clientX 鼠标相对于浏览器左上角x轴的坐标； 不随滚动条滚动而改变；
clientY 鼠标相对于浏览器左上角y轴的坐标；不随滚动条滚动而改变；
pageX 鼠标相对于浏览器左上角x轴的坐标； 随滚动条滚动而改变；
pageY 鼠标相对于浏览器左上角y轴的坐标；随滚动条滚动而改变；
screenX 鼠标相对于显示器屏幕左上角x轴的坐标；

document.addEventListener("click",function(e){
		  // 1. client 鼠标在可视区的x和y坐标  ( 不随滚动条滚动而改变)
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');

            // 2. page 鼠标在页面文档的x和y坐标(随滚动条滚动而改变)
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');

            // 3. screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);
		   
})

小天使案例：注意，鼠标移入拖拽图片，图片一定要使用定位，主要核心思想是获取鼠标在页面的坐标，用坐标值赋值给图片的定位位置的移动参数值就可以实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{position: fixed;
            left: 0px;
            top: 0px;
            width: 50px;
            height: 60px;}
    </style>
</head>
<body>
    <img src="./小天使.gif" alt="">
</body>
<script>
    var imgs=document.querySelector('img');
    document.addEventListener('mousemove',function(e){
       var x=e.pageX-50+'px'
       var y=e.pageY-60+'px'
       imgs.style.left=x
       imgs.style.top=y
    })
</script>
</html>

Ednburgh-

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中的常用鼠标事件以及小天使图片拖拽

1，contextmenu鼠标右键禁用设置属性以后鼠标右键菜单完全失效2，selectstart，禁止选中文字3，获得鼠标在页面上的坐标clientX 鼠标相对于浏览器左上角x轴的坐标；不随滚动条滚动而改变； clientY 鼠标相对于浏览器左上角y轴的坐标；不随滚动条滚动而改变；小天使案例：注意，鼠标移入拖拽图片，图片一定要使用定位，主要核心思想是获取鼠标在页面的坐标，用坐标值赋值给图片的定位位置的移动参数值就可以实现......
复制链接

扫一扫