Js event对象offsetX,pageX,screenX,clientX详解
不同浏览器对event事件的兼容:

tip: 让Firefox支持offsetX、offsetY
//计算光标相对于第一个定位的父元素的坐标
function coordinate(e){
var o = window.event || e,
coord,
coord_X,
coord_Y; coord_X = (o.offsetX === undefined) ? getOffset(o).X : o.offsetX;
coord_Y = (o.offsetY === undefined) ? getOffset(o).Y : o.offsetY;
coord = { "coord_X" : coord_X , "coord_Y" : coord_Y };
return coord;
}
function getOffset(e){
var target = e.target, // 当前触发的目标对象
eventCoord,
pageCoord,
offsetCoord; // 计算当前触发元素到文档的距离
pageCoord = getPageCoord(target); // 计算光标到文档的距离
eventCoord = {
X : window.pageXOffset + e.clientX,
Y : window.pageYOffset + e.clientY
}; // 相减获取光标到第一个定位的父元素的坐标
offsetCoord = {
X : eventCoord.X - pageCoord.X,
Y : eventCoord.Y - pageCoord.Y
};
return offsetCoord;
}
以后会继续添加内容
Js event对象offsetX,pageX,screenX,clientX详解的更多相关文章
- 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
通过 3 张图和 1 张表格,轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: & ...
- js正则实现二代身份证号码验证详解
js正则实现二代身份证号码验证详解 根据[中华人民共和国国家标准 GB 11643-1999]中有关公民身份号码的规定,公民身份号码是特征组合码,由十七位数字本体码和一位数字校验码组成.排列顺序从左至 ...
- vue.js循环for(列表渲染)详解
vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...
- Angular.js中处理页面闪烁的方法详解
Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染 ...
- js keyup、keypress和keydown事件 详解
js keyup.keypress和keydown事件 详解 js keyup.keypress和keydown事件都是有关于键盘的事件 当一个按键被pressed 或released在每一个现代浏 ...
- vue.js选择if(条件渲染)详解
vue.js选择if(条件渲染)详解 一.总结 一句话总结: v-if <!DOCTYPE html> <html lang="en"> <head& ...
- C#类、对象、方法和属性详解
C#类.对象.方法和属性详解 一.相关概念: 1.对象:现实世界中的实体(世间万物皆对象) 2.类:具有相似属性和方法的对象的集合 3.面向对象程序设计的特点:封装 继承 多态 4.对象的三要素:属性 ...
- js Event对象
(事件阶段)Event Phases Event对象在event第一次触发的时候被创建出来,并且一直伴随着事件在DOM结构中流转的整个生命周期.event对象会被作为第一个参数传递给事件监听的回调函数 ...
- JS:event对象下的target属性和取消冒泡事件
1.target 通过获取DOM元素 var box = document.getElementById("box"); document.box.onclick = functi ...
随机推荐
- VPX板卡 基于XC7K325T的3U VPX FMC接口数据收发预处理平台
一.板卡概述 标准VPX 3U板卡, 基于Xilinx公司的FPGAXC7K325T-2FFG900 芯片,pin_to_pin兼容FPGAXC7K410T-2FFG900 ,支持PCIe ...
- mysql02---客户端与服务器模型
目录 一.客户端与服务器模型 连接MySQL方式 总结: 二.MySQL服务器构成 三.MySQL的结构 一.客户端与服务器模型 1.mysql是一个典型的C/S服务结构 1.1 mysql自带的客户 ...
- Codeforces Round #393 (Div. 2) - A
题目链接:http://codeforces.com/contest/760/problem/A 题意:给定一个2017年的月份和该月的第一天的星期,问该月份的日历表中需要多少列.行有7列表示星期一~ ...
- 初学Java 九九乘法表
public class MultiplicationTable { public static void main(String[] args) { System.out.println(" ...
- hibernate 插入Java.uitil.date时时分秒丢失问题解决
<property name="cj_time" column="cj_time"/> 不需要手动定义类型(定义了只能精确到日) new Date ...
- golang-练习3
题目:将输入的字母变成其下一个字母,并且元音字母大写 package main import "fmt" func LetterChanges(str string) string ...
- leetcode之删除数组中的重复值(26题)
给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成. 示例 1 ...
- Vue-cli 项目设置每个页面标题
页面标题 在vue-router页面配置中添加meta的title信息,配合vue-router的beforeEach注册一个前置守卫用户获取到页面配置的title const title = '移动 ...
- boost tuple
boost::tuple is a generalized version of std::pair. While std::pair can only store exactly two value ...
- SQL注入的简单认识
写在前面 MYSQL5.0之后的版本,默认在数据库中存放一个information_schema的数据库,其中应该记住里面的三个表SCHEMATA.TABLES.COLUMNS SCHEMATA表:存 ...