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

 

 

<!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>

 

 

你可能感兴趣的:(event.offsetX event.pageX event.clientX 和 obj.offsetLeft学习笔记)