您的位置：首页 > 其它

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

2016-09-07 18:02 543 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航