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

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

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

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

js中什么是事件冒泡?

在一个对象上触发某类事件,这个事件会向这个对象的的父级传播,从里到外,直至它被处理或者到达了对象层次的最顶层,即document对象。这个过程就是JavaScript的事件冒泡。

cocoscreator 防止button连击多次触发事件

很多时候,ui上面的button都只需要单击触发一次,当用户快速连续点击时就有可能出现非意料的事情,解决这个问题很简单,只要规定button在指定间隔时间内只能触发一次就行。

Js中的事件委托/事件代理

什么叫事件委托/事件代理呢 ?JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

手写事件代理函数

面试是不是听过无数遍呢 !今天我们来手写一个这样的事件委托函数,它是通过事件冒泡机制,即子元素上触发的事件会冒泡到父级上, 即父级也会触发该类型的事件

Openlayers 禁用鼠标双击缩放事件(ol.interaction.DoubleClickZoom)

openlayers地图加载时,默认会有9个交互事件,其中可以看到控制双击缩放事件的DoubleClickZoom,我们知道在绘制线时,结束的响应事件也是双击,所以在绘制线时和双击缩放事件就会冲突了。

JavaScript自定义事件

系统内发生的动作或发生的事情,系统会在事件出现时触发某种信号,提供一个自动加载某种动作的机制。事件三要素:事件源(触发事件的元素也就是你是要对什么东西进行操作);事件(事件的触发方式也就是你要做什么实现所要的交互效果)

jquery的bind跟on绑定事件的区别

Jquery的bind跟on绑定事件的区别:主要是事件冒泡(事件代理);jquery文档中bind和on函数绑定事件的用法:.bind(events [,eventData], handler);.on(events [,selector] [,data], handler)

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

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

vue.js事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

js 任意元素解绑任意事件的兼容代码

解绑事件有三种:注意:用什么方式绑定事件,就应该用对应的方式解绑事件,解绑事件(IE 谷歌 火狐都支持 但是得对于的ON事件),对象.addEventListener(没有on的事件类型,命名函数,false);---绑定事件

点击更多...

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