鼠标事件：onclick、onmousedown、onmouseup、onmouseover、onmouseout、onmouseenter、onmouseleave、鼠标的按键、 div简单拖拽

谁践踏了优雅 2023-06-03 11:54 10阅读 0赞

### 鼠标事件：       onclick：在鼠标左健点击弹起之后触发的事件，即一次完整的鼠标点击过程。过程完成瞬间触发函数。       onmousedown：事件会在鼠标按键被按下时发生。       onmouseup：事件会在松开鼠标按键时触发。 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    </body>
    <script type="text/javascript">
        /*
        鼠标事件：
            onclick：在鼠标左健点击弹起之后触发的事件，即一次完整的鼠标点击过程。过程完成瞬间触发函数；
            onmousedown：事件会在鼠标按键被按下时发生。
            onmouseup：事件会在松开鼠标按键时触发。
         */
        document.onclick = function () {
            console.log('click');
        };
        document.onmousedown = function () {
            console.log('mousedown');
        };
        document.onmouseup = function () {
            console.log('mousemove');
        }
    </script>
    </html>

### onmouseover：属性在鼠标指针移动到元素上时触发。   onmouseout： 属性在鼠标指针移动到元素外时触发。 ###

### onmouseenter：属性在鼠标指针移动到元素上时触发,                 onmouseover和onmouseenter唯一的区别是 onmouseenter 事件不支持冒泡 。   onmouseleave：属性在鼠标指针移动到元素外时触发,                 onmouseout和onmouseleave唯一的区别是 onmouseleave 事件不支持冒泡 。 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div:nth-child(1) {
                width: 200px;
                height: 200px;
                background-color: red;
            }
    
            div:nth-child(2) {
                width: 200px;
                height: 200px;
                background-color: black;
            }
        </style>
    </head>
    <body>
    <div></div>
    <div></div>
    </body>
    <script type="text/javascript">
        /*
        onmouseover：属性在鼠标指针移动到元素上时触发。
        onmouseout： 属性在鼠标指针移动到元素外时触发。
    
        onmouseenter：属性在鼠标指针移动到元素上时触发,
                      onmouseover和onmouseenter唯一的区别是 onmouseenter 事件不支持冒泡 。
        onmouseleave：属性在鼠标指针移动到元素外时触发,
                      onmouseout和onmouseleave唯一的区别是 onmouseleave 事件不支持冒泡 。
         */
        var div = document.getElementsByTagName('div')[0];
        div.onmouseover = function () {
            div.style.backgroundColor = 'blue'
        };
        div.onmouseout = function () {
            div.style.backgroundColor = 'red'
        };
    
        var div2 = document.getElementsByTagName('div')[1];
        div2.onmouseenter = function () {
            div2.style.backgroundColor = 'yellow'
        };
        div2.onmouseleave = function () {
            div2.style.backgroundColor = 'black'
        }
    </script>
    </html>

### 用button来区分鼠标的按键：       通过onmousedown和onmouseup来进行操作 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    </body>
    <script type="text/javascript">
        /*
        用button来区分鼠标的按键：
            通过onmousedown和onmouseup来进行操作
         */
        document.onmousedown = function (event) {
            if (event.button === 0) {
                console.log('左键');
            } else if (event.button === 1) {
                console.log('中间滚轮');
            } else if (event.button === 2) {
                console.log('右键');
            }
        };
        document.onmouseup = function (event) {
            if (event.button === 0) {
                console.log('左键');
            } else if (event.button === 1) {
                console.log('中间滚轮');
            } else if (event.button === 2) {
                console.log('右键');
            }
        }
    </script>
    </html>

###  div简单拖拽 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 0;
                top: 0;
            }
        </style>
    </head>
    <body>
    <div></div>
    </body>
    <script type="text/javascript">
        /*
        一定要绝对定位，脱离文档流才可以移动。
         */
        var div = document.getElementsByTagName('div')[0];
        var disX,
            disY;
        div.onmousedown = function (e) {
            disX = e.pageX - parseInt(div.offsetLeft);
            disY = e.pageY - parseInt(div.offsetTop);
    
            document.onmousemove = function (e) {
                div.style.left = e.pageX - disX + "px";
                div.style.top = e.pageY - disY + "px";
            };
    
            document.onmouseup = function () {
                document.onmousemove = null;
            }
        };
        
    </script>
    </html>