网站首页前端文档正文

day15 - JavaScript鼠标的事件、坐标、跟随

作者：小高今天早睡了吗？更新时间： 2021-12-17 前端文档

一、鼠标事件介绍

主要有以下几个事件，通过代码来逐个展示功能。

css样式：

        .a{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .b{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }

核心代码：

    <div class="a">
        <div class="b"></div>
    </div>

在这里插入代码片

1. 鼠标点击事件：click左键单击， dblclick左键双击

        document.ondblclick = function (e) {
            console.log('鼠标双击') ;
        }

        document.onclick = function (e) {
            console.log('鼠标单击') ;
        }

2. 鼠标按下和抬起 mousedown / mouseup (左键，中间键和右键都可以触发)

注意：单击事件是包含了鼠标按下+抬起，专指鼠标左键
e.button 0左键 / 1中间键 / 2右键

        //鼠标按下
        document.onmousedown = function (e) {
            console.log(e.button);
        }
        
        //鼠标抬起
        document.onmouseup = function (e) {
            console.log(e.button);
        }

3. 鼠标移入，移出：

mouseover / mouseout 一对支持事件冒泡

        var oA = document.querySelector('.a') ;
        var oB = document.querySelector('.b') ;

        oA.onmouseover = function () {
            console.log('鼠标移入');
        }
        
        oB.onmouseout = function () {
            console.log('鼠标移出');
        }

mouseenter / mouseleave 一对支持事件捕获不建议使用

        var oA = document.querySelector('.a') ;
        var oB = document.querySelector('.b') ;
        
        oA.onmouseenter = function () {
            console.log('鼠标移入enter');
        }

        oB.onmouseleave = function () {
            console.log('鼠标移出leave');
        }

4. 鼠标移动：mousemove就是当鼠标在元素上移动时，将会触发此事件。

        var oA = document.querySelector('.a') ;
        
        oA.addEventListener('mousemove' , function () {
            console.log(666);
        })

二、鼠标的坐标

坐标需要用事件对象才能拿到（e / event ）
距离浏览器的坐标 e.clientX / e.clientY 一般也简写做 e.x / e.y
距离实际页面的坐标 e.pageX / e.pageY （有滚动条的时候使用）
距离目标源的坐标 e.offsetX / e.offsetY
ele.offsetLeft / ele.offsetTop 距离最近的具有定位的祖先元素的距离

css样式

        *{
            margin: 0;
        }
        body{
            width: 300px;
            height: 3000px;
        }
        .a{
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 100px;
        }
        .a1{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            margin: 20px;
        }

核心代码

<body>
    <div class="a">
        <div class="a1"></div>
    </div>
    
    <script>
        var oA = document.querySelector('.a')

           //坐标需要用过事件对象才能拿到
            oA.onclick = function (e) {
            //距离浏览器的距离 
            console.log(e.clientX);
            console.log(e.clientY);

            //距离实际页面的坐标
            console.log(e.pageX);
            console.log(e.pageY);

            //距离浏览器的坐标  e.x = e.clientX
            console.log(e.x);
            console.log(e.y);

            //距离离鼠标最近的盒子的坐标
            console.log(e.offsetX);

        }
    </script>
</body>

三、鼠标跟随

注意：
1.分清楚浏览器可视窗口的宽高和物体距离浏览器的宽高
2.注意div的上陷和右陷

<!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>
        .a{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            /* 光标指示某对象可被移动。 */
            cursor: move;
        }
    </style> 
</head>
<body>
    <div class="a"></div>

    <script>
        var oDiv = document.querySelector('.a') ;

        //获取div元素的宽
        var oDivWidth = css(oDiv , 'width') ;

        //去掉px
        oDivWidth = parseInt(oDivWidth) ;

        //获取div元素的高(去掉px)
        var oDivHeight = parseInt(css(oDiv , 'height')) ;

        //方法二：去掉px
        // oDivWidth = oDivHeight.replace('px' , '') ;
        //方法三：去掉px
        // oDivWidth = oDivWidth.split('px')[0];


        //documentElement.clientWidth浏览器可视宽度
        var maxX = document.documentElement.clientWidth - oDivWidth ;
        var maxY = document.documentElement.clientHeight - oDivHeight ;

        //鼠标是在整个页面中移动
        document.onmousemove = function (e) {
            //设置鼠标在div的中心点位置
            var x = e.x - oDivWidth / 2 ;
            var y = e.y - oDivHeight / 2 ;

            //使div不会右陷和上陷
            if(x < 0){
                x = 0
            }
            if(y < 0){
                y = 0
            }

            //使div不会超出浏览器可视范围
            if(x > maxX){
                x = maxX
            }
            if(y > maxY){
                y = maxY
            }
            oDiv.style.left = x + 'px' ;
            oDiv.style.top = y + 'px'

        }

        //getComputedStyle(元素 ，伪类)：获取css属性值
        function css(ele , prop){
            if(window.getComputedStyle){
                return getComputedStyle(ele)[prop]
            }
            return ele.currentStyle[prop]
        }
    </script>
</body>
</html>

2.鼠标在盒子中的跟随

<!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>
        .a {
            width: 600px;
            height: 600px;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            margin: auto;
            background-color: pink;
        }

        .a1 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="a">
        <div class="a1"></div>
    </div>

    <script>
        //获取对象
        var oA = document.querySelector('.a');
        var oA1 = document.querySelector('.a1');
        var oA_width = parseInt(css(oA, 'width'));
        var oA_height = parseInt(css(oA, 'height'));

        var oA1_width = parseInt(css(oA1, 'width'));
        var oA1_height = parseInt(css(oA1, 'height'))

        var maxX = oA_width - oA1_width;
        var maxY = oA_height - oA1_height;

        document.onmousemove = function (e) {
            var x = e.offsetX - oA1_width / 2 ;
            var y = e.offsetY - oA1_height / 2 ;
            //使a1盒子的移动不会超出a盒子
            if(x < 0) x = 0 ;
            if(y < 0) y = 0 ;
            if(x > maxX) x = maxX ;
            if(y > maxY) y = maxY ;
            oA1.style.cssText = `left:${x}px ; top:${y}px`
        }

        //getComputedStyle(元素 ，伪类)：获取css属性值
        function css(ele, prop) {
            if (window.getComputedStyle) {
                return getComputedStyle(ele)[prop]
            }
            return ele.currentStyle[prop]
        }
    </script>
</body>
</html>

事件禁用：pointer-events: none; 相当于按钮上的disabled属性

四、offsetLeft

offsetLeft 距离最近的具有定位的祖先元素的距离，这个元素自身不需要定位。
（1）如果父辈元素中有定位的元素，那么就返回距离当前元素最近的定位元素边缘的距离。
（2）如果父辈元素中没有定位元素，那么就返回相对于body左边缘距离。

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 500px;
            background-color: pink;
            margin-left: 100px;
            position: relative;
        }
        .a{
            width: 200px;
            height: 200px;
            margin-left: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="a"></div>
    </div>

    <script>
        // offsetLeft 距离最近的具有定位的祖先元素的距离 ， 这个元素自身不需要定位
        var oA = document.querySelector('.a') ;
        console.log(oA.offsetLeft);   // 100
    </script>
</body>
</html>

原文链接：https://blog.csdn.net/m0_55710075/article/details/122179401

上一篇：JavaScript用事件委托实现留言板功能
下一篇：Javascript_几串代码带你初步了解获取变量类型及