js鼠标事件参数,获取鼠标在网页中的坐标

时间: 2018-10-30阅读: 2529标签: 事件

1. 事件对象 event

标准浏览器 传递给响应函数

IE 把 event 事件对象作为全局对象 window 的一个属性

 

2. 浏览器滚动条高度

标准浏览器 使用 documen.documentElement.scrollLeft    documen.documentElement.scrollTop 

Safari 等浏览器 使用 window.pageXOffset    window.pageYOffset

没有 doctype 声明的页面 document.body.scrollLeft    document.body.scrollTop

 

3. 获取鼠标在网页中的坐标 = 鼠标在视窗中的坐标 + 浏览器滚动条坐标

// 鼠标事件参数    兼容性封装 Test Already.
var kjfMouse = {
    getEvent : function(e){
        return e || window.event;
    },
    
    getTarget : function(e){
        return this.getEvent(e).target || this.getEvent(e).srcElement;
    },
    
    getClientX : function(e){
        return this.getEvent(e).clientX;
    },
    
    getClientY : function(e){
        return this.getEvent(e).clientY;
    },
    
    // 水平滚动条偏移
    getScrollLeft : function(){
        return  document.documentElement.scrollLeft ||    // 火狐 IE9及以下滚动条是html的
                window.pageXOffset ||                     // IE10及以上 window.pageXOffset
                document.body.scrollLeft;                 // chrome 滚动条是body的
    },
    
    // 垂直滚动条偏移
    getScrollTop : function(){
        return  document.documentElement.scrollTop ||    // 火狐 IE9 及以下滚动条是 html 的
                window.pageYOffset ||                    // IE10 及以上 window.pageXOffset
                document.body.scrollTop;                 // chrome 滚动条是body的
    },
    
    getPageX : function(e){
        return (this.getEvent(e).pageX)?( this.getEvent(e).pageX ):( this.getClientX(e)+this.getScrollLeft() );
    },
    
    getPageY : function(e){
        return (this.getEvent(e).pageY)?( this.getEvent(e).pageY ):( this.getClientY(e)+this.getScrollTop() );
    }
};


原文地址:https://www.cnblogs.com/tianxiaxuange/p/9873771.html  


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1217

解决移动端页面滚动后不触发touchend事件

在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件,用的较多的是使用touchend事件替代PC端的click和mouseup事件。但是,touchend事件在页面滚动时有个问题。

网页浏览器缩放监听

这里的缩放不是指resize事件(改变浏览器窗口大小),而是指浏览器本身的缩放功能,一般使用以下方式进行缩放:ctrl配合鼠标滚轮;ctrl配合-/+/0进行缩放。

Js事件传播流程

js事件传播流程主要分三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。在我们平常用的addEventListener方法中,一般只会用到两个参数,一个是需要绑定的事件,另一个是触发事件后要执行的函数

js事件冒泡和默认事件处理(原生js、vue)

何为默认事件?比如 a 会跳转页面,submit 会提交表单等。普通js方法:e.preventDefault()函数。Vue.js方法: .prevent 是vue 的内置修饰符,调用了 event.preventDefault()阻止默认事件

js 彻底搞懂事件循环机制 Event Loop

所谓单线程,无非就是同步队列和异步队列,js代码是自上向下执行的,在主线程中立即执行的就是同步任务,比如简单的逻辑操作及函数,而异步任务不会立马立马执行,会挪步放到到异步队列中,比如ajax、promise、事件、计时器等等。

浏览器事件之事件处理程序

事件是用户或浏览器自身执行的某种行动(如click、mousemove等)。而处理对应事件的程序称为事件处理程序(或事件监听器)。

深入nodejs-核心模块Events详解(事件驱动)

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O的模型,使其轻量又高效。比如,文件操作中的fs事件流,网络编程所用到的tcp,http模块等,当你回想自己写的程序后,会发现很多操作都基于事件驱动,Events类。

JS使用Enter事件将输入的字符倒叙输出

在JavaScript中执行当用户按下Enter键位时将用户输入的字符倒叙输出!split() 方法用于把一个字符串分割成字符串数组。

vue.js 事件绑定

(1)使用v-on指令可以添加事件监听,语法:2)参数:$event就是当前触发事件的元素,即使不传$event,在回调函数中也可以使用event这个参数

微信小程序中事件

Touchcancle: 在某些特定场景下才会触发(比如来电打断等);​ tap事件和longpress事件通常只会触发其中一个;事件传递参数当视图层发生事件时,某些情况需要事件携带一些参数到执行的函数中, 这个时候就可以通过

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!