JavaScript 十种鼠标事件

最新推荐文章于 2024-06-20 23:18:02 发布

freedom_文

最新推荐文章于 2024-06-20 23:18:02 发布

阅读量3.5k

点赞数 2

分类专栏： javascript

本文链接：https://blog.csdn.net/freedomVenly/article/details/90747566

版权

javascript 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

在这里插入图片描述
记录备忘：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button onclick="mouse1()">onclick 左键单击事件</button>

<button oncontextmenu="mouse1()">oncontextmenu 右键单击事件</button>

<button onDblClick="mouse1()">onDblClick 双击事件</button>

<button onMouseDown="mouse1()">onMouseDown 鼠标按下</button>

<button onMouseUp="mouse1()">onMouseUp 鼠标松开</button>

<button onmouseover="mouse1()">onmouseover 当鼠标移动到目标元素时触发，到其后代元素上时 也 ！会触发</button>

<button onmouseenter="mouse1()">onmouseenter 当鼠标移动到目标元素时触发，到其后代元素上时 不！ 会触发</button>

<button onmouseout="mouse1()">onmouseout 鼠标离开目标元素</button>

<button onmouseleave="mouse1()">onmouseleave 鼠标离开目标元素</button>

<button onmousemove="mouse1()">onmousemove 鼠标移动</button>

<br>

<div onclick="mouse1()">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium id iste minima modi molestiae necessitatibus, quibusdam quod recusandae, soluta ut, vel veritatis voluptatibus! Asperiores, quae, vero! Fugit itaque iusto natus.
</div>

<br>

<div>
    <p>测试浏览器：  Chrome &&   IE11 </p>


    鼠标按键值：

    event.x 鼠标x横轴坐标
    event.y 鼠标y纵轴坐标


    <br>
    <!--对于0 这个值对应的按键网上查到有好几种，个人在Chrome 和 IE11  下测试的时候都是 左键-->
    event.button ==  0              默认 / 左键
    event.button ==  1              左键
    event.button ==  2              右键

    一般就使用这几个键了，  其他的几乎特别的少用，方法写在 script 里了，有需要可以测试，





    另外附一个网上搜到的数据：
    鼠标键值
    events.button=0 默认，没有按任何按钮。
    events.button=1 鼠标左键
    events.button=2 鼠标右键
    events.button=3 鼠标左右键同时按下
    events.button=4 鼠标中键
    events.button=5 鼠标左键和中键同时按下
    events.button=6 鼠标右键和中键同时按下
    events.button=7 所有三个键都按下

</div>


<script>

    function mouse1() {
        console.log(event.button);
    }


</script>
</body>
</html>