screenX clientX pageX的区别

screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角。

clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动。

pageX:参照点也是浏览器内容区域的左上角,但它不会随着滚动条而变动

JS原生事件的写法

    document.onclick = function(){
alert(1); //只要是点击页面的任何一个地方,都会弹1.
};

<script>
function test(){
console.log('123');
}
</script> <button onclick='test()' >adadas</button>
    document.onclick = function(){
        alert(1);   //只要是点击页面的任何一个地方,都会弹1.
    };

screen,client,page三种确定鼠标坐标的区别和原生JS事件写法,区别于Jquery的$.on(x,y);和$.click()的更多相关文章

  1. java:JavaScript2:(setTimeout定时器,history.go()前进/后退,navigator.userAgent判断浏览器,location.href,五种方法获取标签属性,setAttribute,innerHTML,三种方法获取form表单信息,JS表单验证,DOM对象,form表单操作)

    1.open,setTimeout,setInterval,clearInterval,clearTimeout <!DOCTYPE> <html> <head> ...

  2. js中三种定义变量的方式const, var, let的区别。

    const   var  let区别 1.const 定义的变量不可以修改,而且必须初始化 const a = 3;正确 const a;错误,必须初始化 console.log("函数外c ...

  3. Javascript事件模型系列(一)事件及事件的三种模型

    一.开篇 在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...

  4. HTML5实现动画三种方式

    编者注:作者以一个运动的小车为例子,讲述了三种实现HTML5动画的方式,思路清晰,动画不仅仅是canvas,还有css3和javascript.通过合理的选择,来实现最优的实现. PS:由于显卡.录制 ...

  5. JavaScript--------------------jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画

    bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){alert( ...

  6. EF框架的三种工作方式

    EF框架step by step(1)—Database-First EF框架step by step(2)—Model-First EF框架step by step(3)—Code-First 通过 ...

  7. jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画

    地狱的镰刀 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){ ...

  8. java设计模式---三种工厂模式之间的区别

    简单工厂,工厂方法,抽象工厂都属于设计模式中的创建型模式.其主要功能都是帮助我们把对象的实例化部分抽取了出来,优化了系统的架构,并且增强了系统的扩展性. 本文是本人对这三种模式学习后的一个小结以及对他 ...

  9. 取消选中单选框radio的三种方式

    作者: 铁锚 日期: 2013年12月21日 本文提供了三种取消选中radio的方式,代码示例如下: 本文依赖于jQuery,其中第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DO ...

随机推荐

  1. Hibernate学习大全

    第1课 课程内容. 6 第2课Hibernate UML图. 6 第3课 风格. 7 第4课 资源. 7 第5课 环境准备. 7 第6课 第一个示例HibernateHelloWorld 7 第7课 ...

  2. ssh keygen命令实现免密码通信(git库获取操作权限:开发人员添加到git库中,获取操作权限)

    先看两个机器实现免密码登陆通讯: 假设 A 为客户机器,B为目标机: 要达到的目的: A机器ssh登录B机器无需输入密码: 加密方式选 rsa|dsa均可以,默认dsa 做法: 1.登录A机器 2.s ...

  3. Spring 学习笔记---Bean的生命周期

    生命周期图解 由于Bean的生命周期经历的阶段比较多,我们将通过一个图形化的方式进行描述.下图描述了BeanFactory中Bean生命周期的完整过程: Bean 的生命周期从Spring容器着手实例 ...

  4. C语言有哪些鲜为人知的特性?

    译注:本文摘编自 Quora 的一个热门问答贴. 请在linux系统下测试本文中出现的代码 Andrew Weimholt 的回复: switch语句中的case 关键词可以放在if-else或者是循 ...

  5. package.json字段全解

    原文:http://blog.csdn.net/woxueliuyun/article/details/39294375 Name 必须字段. 小提示: 不要在name中包含js, node字样: 这 ...

  6. Dapper.SimpleCRUD mysql 插入数据时出现的小插曲

    最近想玩一下.net dapper,然后在nuget包中搜索看到了 Dapper.SimpleCRUD ,然后我等好奇心重的小骚年,内心又开始跃跃欲试. 使用sqlserver数据库时没有遇到问题,既 ...

  7. Eclipse两种部署web项目方法

    一).首先使用J2EE的Eclipse的Servers(可以从show view中取出). 1).通过Eclipse建立一个Dynamic Web Project 2).通过Servers视图来创建一 ...

  8. IntelliJ IDEA下Cannot resolve symbol XXX的解决方法

    Idea导入maven项目后,运行能通过,但是打开一些类后,会出现Cannot resolve symbol XXX的错误提示. 考虑几种可能: 1.JDK版本,设置JDK和Maven的JDK版本. ...

  9. Ionic Framework - Getting 'ionic start [appName]' Working Behind a Proxy

    This is a quick hacky way to get the ionic start [appName] command working from behind a proxy. I ra ...

  10. Neo4j安装后的密码修改

    首先默认用户名/密码是neo4j/neo4j. 在安全验证打开的时候,你访问服务器/db/data之类的地址可能会提示您以下信息: { "password_change" : &q ...