一、问题描述

工作中，需要在航拍图中添加摄像头在航拍图中的位置，因此，需要开发一个功能：鼠标点击航拍图（背景），显示鼠标点击位置在页面中的位置（pageX和pageY）,然后将坐标数据告诉后台，手动添加到数据库中。

二、图例说明

三、案例

<!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学习笔记相关推荐

event.x,event.clientX,event.offsetX区别
x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置. clientX:相对于客户区域的x坐标位置,不包括滚动条,就是正文区域. offsetx:设置或者是得到鼠标相对于目标事件的 ...
一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别
先总结下区别:event.clientX.event.clientY鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性event. ...
区分event对象中的[clientX,offsetX,screenX,pageX]
前言在平时的开发中,非常讨厌的就是兼容性了,兼容性的问题总会让我们记忆混淆,所以这次来区分一下event对象中的常用获取鼠标位置. clientX clientY event.clientX eve ...
Dojo学习笔记(8. dojo.event dojo.event.topic dojo.event.browser)
Dojo学习笔记(8. dojo.event & dojo.event.topic & dojo.event.browser) 模块:dojo.event 终于进入有名的dojo事件处 ...
pageX、clientX、screenX、offsetX、layerX、x
参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome: e.pageX--相对整个页面的坐标 e.layerX- ...
input回车触发事件_JavaScript学习笔记（十五）-- Event事件（上）
EVENT(上) 之前我们简单的了解过一些事件,比如 onclick / onload / onscroll / ... 今天开始,我们详细的学习一些事件什么是事件一个事件由什么东西组成触发谁 ...
区分clientX、offsetX、pageX、screenX
以前一直以为写了这几个属性的区分的,今天再来看居然没有写. 不过这个还是很有用的.这里再来总结一下. 所有解释都在图里面.这里再来文字解释一下,图中至标注了Y的值,X同理. clientX clien ...
研究MouseEvent中的clientX、offsetX、pageX、screenX
很多时候需要在鼠标点击的时候获取点击的坐标来处理一些逻辑,有时候clientX.offsetX.pageX用的也不清楚,特此做了一个实验来记录. 1.含义 clientX 提供应用程序客户区域内发生事 ...
Event 系列： jquery event 源码
/* * author:prk * date:2008-08-17 * comment:analyse of jquery event * */ jQuery.event = { // add 事件到 ...

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

一、问题描述

二、图例说明

三、案例

event.offsetX event.pageX event.clientX 和 obj.offsetLeft学习笔记相关推荐

最新文章

热门文章