JS中的鼠标事件

目录

前言

一、鼠标事件属性

1. MouseEvent.button属性

2. MouseEvent.clientX，MouseEvent.clientY

 3. MouseEvent.offsetX，MouseEvent.offsetY

 4. MouseEvent.pageX，MouseEvent.pageY

二、案例

1.案例一

2. 案例二

总结

前言

通过鼠标触发事件，类似用户的行为：

属性 描述
onclick 当单击鼠标时运行脚本。
onmousedown 当按下鼠标按钮时运行脚本。
onmouseup 当松开鼠标按钮时运行脚本。
onmousemove 当鼠标指针移动时运行脚本。
onmouseover 当鼠标指针移至元素之上时运行脚本，不可以阻止冒泡。
onmouseout 当鼠标指针移出元素时运行脚本，不可以阻止冒泡。
onmouseenter 当鼠标指针移至元素之上时运行脚本，可以阻止冒泡。
onmouseleave 当鼠标指针移出元素时运行脚本，可以阻止冒泡。
onmousewheel 当转动鼠标滚轮时运行脚本。
onscroll 当滚动元素的滚动条时运行脚本。

mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。

var div = document.getElementById("div")
var p   = document.getElementById("p")
div.onmouseover=function(){
    console.log("div")
}
p.onmouseover=function(){
    console.log("p")            
}                               //冒泡阶段
div.onmouseenter=function(){
    console.log("div")
}
p.onmouseenter=function(){
    console.log("p")
}                               //捕获阶段

一、鼠标事件属性

1. MouseEvent.button属性

MouseEvent.button属性返回一个数值，表示事件发生时按下了鼠标的哪个键。
0代表左键
1代表中键
2代表右键

document.body.onmousedown=function(e){
    e=e||window.event
    console.log(e.button)
}

2. MouseEvent.clientX，MouseEvent.clientY

MouseEvent.clientX属性返回鼠标位置相对于浏览器窗口左上角的水平坐标，
MouseEvent.clientY属性返回鼠标位置相对于浏览器窗口左上角的垂直坐标，
这两个属性都是只读属性。

document.body.onmousedown=function(e){
    e=e||window.event
    console.log(e.clientX,e.clientY)
}

 3. MouseEvent.offsetX，MouseEvent.offsetY

MouseEvent.offsetX属性返回鼠标位置距离事件作用对象左侧边缘的水平距离，
MouseEvent.offsetY属性返回鼠标位置距离事件作用对象左侧边缘的垂直距离，
这两个属性都是只读属性。

div.onclick=function(e){
    e=e||window.event
    console.log(e.offsetX,e.offsetY)
    //鼠标事件触发时,当前鼠标位置距离目标节点左上角的距离
}

 4. MouseEvent.pageX，MouseEvent.pageY

MouseEvent.pageX属性返回鼠标位置距离文档左侧边缘的距离，
MouseEvent.pageY属性返回鼠标位置距离文档顶部的距离。
这两个属性都是只读属性。

document.body.onclick=function(e){
    e=e||window.event
    console.log("pageY:"+e.pageY)               //距离文档顶部
    console.log("clientY:"+e.clientY)           //距离可视窗口顶部
}

二、案例

1.案例一

创建一个正方形div，默认颜色为黑色，当鼠标移入div，背景颜色变为红色，当鼠标移出div，背景颜色变为绿色

代码如下（示例）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="box" style="width: 100px;height: 100px;background: black;"></div>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var box = document.getElementById("box");
    /* 当鼠标移入div，背景颜色变为红色 */
    box.onmouseenter = function () {
        this.style.background = "red";
    };
    /* 当鼠标移出div，背景颜色变为绿色 */
    box.onmouseleave = function () {
        this.style.background = "green";
    };
</script>
</body>
</html>

2. 案例二

编写一个通用的拖拽元素函数，创建两个div，进行拖拽演示，要求兼容IE8、火狐、谷歌等主流浏览器

代码如下（示例）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="box1" style="width: 100px;height: 100px;background: red;position: absolute;"></div>
<div id="box2" style="width: 100px;height: 100px;background: green;position: absolute;"></div>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var box1 = document.getElementById("box1");
    var box2 = document.getElementById("box2");
    drag(box1);
    drag(box2);
    /*
     * 提取一个专门用来设置拖拽的函数
     * 参数：开启拖拽的元素
     */
    function drag(obj) {
        //当鼠标在被拖拽元素上按下时，开始拖拽
        obj.onmousedown = function (event) {
            // 解决事件的兼容性问题
            event = event || window.event;
            // 设置obj捕获所有鼠标按下的事件
            /**
             * setCapture()：
             * 只有IE支持，但是在火狐中调用时不会报错，
             * 而如果使用chrome调用，它也会报错
             */
            obj.setCapture && obj.setCapture();
            // obj的偏移量 鼠标.clentX - 元素.offsetLeft
            // obj的偏移量 鼠标.clentY - 元素.offsetTop
            var ol = event.clientX - obj.offsetLeft;
            var ot = event.clientY - obj.offsetTop;
            // 为document绑定一个鼠标移动事件
            document.onmousemove = function (event) {
                // 解决事件的兼容性问题
                event = event || window.event;
                // 当鼠标移动时被拖拽元素跟随鼠标移动
                // 获取鼠标的坐标
                var left = event.clientX - ol;
                var top = event.clientY - ot;
                // 修改obj的位置
                obj.style.left = left + "px";
                obj.style.top = top + "px";
            };
            // 为document绑定一个鼠标松开事件
            document.onmouseup = function () {
                // 取消document的onmousemove事件
                document.onmousemove = null;
                // 取消document的onmouseup事件
                document.onmouseup = null;
                // 当鼠标松开时，取消对事件的捕获
                obj.releaseCapture && obj.releaseCapture();
            };
            /*
             * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
             * 此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
             * 如果不希望发生这个行为，则可以通过return false来取消默认行为，
             * 但是这招对IE8不起作用
             */
            return false;
        };
    }
</script>
</body>
</html>

总结

假如我们正监视一个容器上的鼠标事件，而容器中添加了一些组件，则当在组件上进行单击鼠标、移动鼠标等操纵时，容器将不知道这些操纵的发生。

可以使用鼠标事件的转移将一个事件源发生的鼠标事件转移到另一个事件源上，也就是说，当用户的在某个事件源上单击鼠标时，可以通过鼠标事件的转移导致另一个事件源上发生鼠标事件(声东击西)。使用javax.swing包中的SwingUtilities类的静态方法：

MouseEvent convertMouseEvent(Component source，MouseEvent sourceEvent，Component destination)

可以将source组件上发生的鼠标事件转移到组件destination，该方法返回转移后的鼠标事件。 在下面的例子mouse6.java中，用户单击一个按钮，然后拖动鼠标移动按钮的位置，观察鼠标事件的转移。

       以上就是今天要讲的内容，本文仅仅简单介绍了JS中的鼠标事件。

标签 , ,

发表回复