event.offsetX event.pageX event.clientX 和 obj.offsetLeft学习笔记

来源：互联网发布：改变桌面图标大小mac 编辑：程序博客网时间：2024/05/05 14:01
<!DOCTYPE html><html lang="zh-CN"><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <link rel="stylesheet" href="css/bootstrap.min.css">    <link rel="stylesheet" href="css/sqh_style_v2.0.css">    <script src="js/jquery.js"></script><title>家政服务</title><body ><div style="position: absolute;top:50%;left: 50%;width: 200px;height: 200px;border: 1px solid red;" id="parentId">    <div style="width: 100px;height: 100px;border: 1px solid blue; margin-top:10px;padding-top: 20px;padding-left: 30px;margin-left: 40px;" id="sonId">        dasfdsaf    </div></div></body><script>    $(function(){        $("#sonId").on("click",function(event){            var parentObj = document.getElementById("parentId");            var sonObj = document.getElementById("sonId");            //获取当前控件距离当前父控件的距离            console.log("parentObj.offsetLeft : " + parentObj.offsetLeft);            console.log("parentObj.offsetTop : " + parentObj.offsetTop);            //获取点击事件的类型            console.log(event.type);            //获取鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,            console.log("event.offsetX : " + event.offsetX);            console.log("event.offsetY : " + event.offsetY);            //鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化            console.log("event.pageX : " + event.pageX);            console.log("event.pageY : " + event.pageY);            //鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.            console.log("event.clientX : " + event.clientX);            console.log("event.clientY : " + event.clientY);        });    });</script></html>
0 0