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. 开源项目Git地址

     1.陈明.李建勋.邓覃思   fog-aliyun https://git.oschina.net/dengqinsi/fog-aliyun.git 2.吴俊.骆仲军.袁良福   CDN的H5助 ...

  2. Leetcode_278_First Bad Version

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/49719255 You are a product mana ...

  3. PS 图像特效-非线性滤波器

    利用非线性滤波器,使图像的色彩凝块,形成一种近似融化的特效. clc; clear all; addpath('E:\PhotoShop Algortihm\Image Processing\PS A ...

  4. 用JAVA代码获取Weblogic配置的JNDI 数据源连接

    第一步:生成与JDK版本对应的weblogicjar,利用cmd 进入到weblogic_home 路径下进入到server/lib目录,然后运行  JDK  1.6 命令 "java -j ...

  5. 记一次erlang语言bug导致rabbitmq的队列没有消费者的问题

    公司开发和测试环境采用的erlang版本是19.0.3,rabbitmq版本为3.6.10.集群条件下稳定使用了近一年时间,没什么问题. 为了保持和线下一致,线上生产环境采用了相同的版本,运行几个月后 ...

  6. Copy List with Random Pointer(复杂链表复制)

    输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用,否则判题程序 ...

  7. 超强js博客值得学习!!!

    再读ecmascript 摘要: 这几天,又花了点时间看了下ecmascript.以下是我摘录出来的一些理解.在此记录下.第一部分:关于变量对象的理解1) 什么是变量对象?数据的存取与读取机制,就是变 ...

  8. Oracle的网络监听配置

    listener.ora.tnsnames.ora和sqlnet.ora这3个文件是关系oracle网络配置的3个主要文件,都是放在$ORACLE_HOME\network\admin目录下.其中li ...

  9. Python用pip安装IPython/Jupyter最佳交互环境

    一.Python模块及安装包简介 如果说编程语言是武器,那么Python就是一把双管枪(Python2/Python3),而各种为Python编写的模块和包就是子弹.使用pip来填满我们的武器吧! I ...

  10. EF Core使用SQL调用返回其他类型的查询

    假设你想要 SQL 本身编写,而不使用 LINQ. 需要运行 SQL 查询中返回实体对象之外的内容. 在 EF Core 中,执行该操作的另一种方法是编写 ADO.NET 代码,并从 EF 获取数据库 ...