JavaScript事件对象+拖拽

最新推荐文章于 2024-07-12 09:36:48 发布

油、东西

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量111

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/ZZY192921533/article/details/124750811

版权

事件对象

ie8及其以下都不支持event事件对象，只能用window.event

// 需要传入e或者event
function(event){
console.log(event)
}
// 这样就能在控制台输出所有的事件对象

每次调用事件对象之前都要做一个兼容性的处理
var e= event || window.event
以下就是常用的一些事件对象：
相对于可视区域鼠标触发事件时返回的X,Y坐标
console.log(e.clientX)
console.log(e.clientY)
相对于触发元素时返回的X,y坐标(火狐浏览器不支持)
console.log(e.offsetX)
console.log(e.offsetY)
相对于鼠标在屏幕触发事件时的X,Y坐标
console.log(e.screenX)
console.log(e.screenY)
可视区＋滚轮的触发事件时的X,Y坐标
console.log(e.pageX)
console.log(e.pageY)
以上X,Y均为大写

  **div.offsetLeft
    div.offsetTop 获取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>拖拽</title>
    <style>
        #box{
            height: 300px;
            width: 300px;
            background-color: green;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        // 拖拽功能的实现:
        // 1.给div一个定位
        // 2.onmousedown   onmousemove   onmouseup
        // 3.事件对象 鼠标的坐标点         
        var box=document.getElementById("box")
        box.onmousedown=function(event){
            // console.log("鼠标down")
            // 按下时获取到鼠标的坐标
            var e=event || window.enent
            // var x=e.offsetX
            // var y=e.offsetY  火狐不兼容
            var x=e.clientX-box.offsetLeft
            var y=e.clientY-box.offsetTop  // 获取到div的横纵坐标
            console.log(x+","+y)
            box.onmousemove=function(event){
                // console.log("鼠标move")
                var e=event || window.enent
                var X=e.clientX
                var Y=e.clientY
                console.log(X+","+Y)
                box.style.left=X-x+"px"
                box.style.top=Y-y+"px"
            }
            box.onmouseup=function(){
                // console.log("鼠标up")
                    box.onmousemove=null
                }
        }
    </script>
</body>
</html>