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

最新推荐文章于 2024-04-29 14:41:33 发布

&XYZ&

最新推荐文章于 2024-04-29 14:41:33 发布

阅读量9.5k

点赞数 7

分类专栏： JavaScript

本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/102231358

版权

JavaScript 专栏收录该内容

73 篇文章 1 订阅

订阅专栏

鼠标事件：
    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>

&XYZ&

关注

7
点赞
踩
23

收藏

觉得还不错? 一键收藏
1
评论
鼠标事件：onclick、onmousedown、onmouseup、onmouseover、onmouseout、onmouseenter、onmouseleave、鼠标的按键、 div简单拖拽

鼠标事件： onclick：在鼠标左健点击弹起之后触发的事件，即一次完整的鼠标点击过程。过程完成瞬间触发函数。 onmousedown：事件会在鼠标按键被按下时发生。 onmouseup：事件会在松开鼠标按键时触发。<!DOCTYPE html><html lang="en"><head> <meta cha...
复制链接

扫一扫