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

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

时间: 2024-10-12 10:23:46

鼠标参数,获取鼠标在网页中的坐标的相关文章

用VBS控制鼠标(获取鼠标坐标、鼠标移动、鼠标单击、鼠标双击、鼠标右击)

Demon's Blog 忘记了,喜欢一个人的感觉 Demon's Blog  ?  程序设计  ?  用VBS控制鼠标(获取鼠标坐标.鼠标移动.鼠标单击.鼠标双击.鼠标右击) ? bbPress积分插件--Virtual Money VBS调用WMI监视注册表变动 ? 用VBS控制鼠标(获取鼠标坐标.鼠标移动.鼠标单击.鼠标双击.鼠标右击) 标题: 用VBS控制鼠标(获取鼠标坐标.鼠标移动.鼠标单击.鼠标双击.鼠标右击)作者: Demon链接: http://demon.tw/programm

在OCX初始化时获取其在网页中的DOM对象

OCX初始化的时候会调用SetClientSite,会传入IOleClientSite对象. 1 CComQIPtr<IOleControlSite, &IID_IOleControlSite> spSite(pClientSite); 2 CComDispatchDriver ecDisp; 3 spSite->GetExtendedControl(&ecDisp); 如上代码,根据IOleClientSite对象,我们可以得到IOleControlSite对象:再通过

【C#】MouseEventArgs事件参数获取鼠标的位置

private void Form1_MouseDown(object sender, MouseEventArgs e) { string x = e.X.ToString(); //x坐标 string y = e.Y.ToString(); //Y坐标 MessageBox.Show("X:"+x+" Y:"+y); }

javascript: Element.getBoundingClientRect() 获取元素在网页上的坐标位置

来自:https://blog.csdn.net/weixin_42895400/article/details/81811095?utm_source=blogxgwz1 Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置. 相关的属性:left,top,right,bottom 如果网页窗口有滚动条,还要加上下面的这一段: var scrollX = document.documentElement.scrollLeft || docume

html5中canvas的使用 获取鼠标点击页面上某点的RGB

1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> 需要谷歌的一个html5.js的文件即可. 注意:必须插入在<head></he

BaseTool中鼠标双击事件获取鼠标位置的方法

ArcGISEngine的BaseTool类中提供了鼠标双击.鼠标移动.鼠标按键按下.鼠标按键弹起四种鼠标事件,但是鼠标双击事件的参数跟其他三种不一样,双击事件中没有提供鼠标位置信息. public virtual void OnDblClick(); public virtual void OnMouseDown(int Button, int Shift, int X, int Y); public virtual void OnMouseMove(int Button, int Shift

在网页中引用DWG控件,交互绘图,和响应鼠标点击对象的方法

在网页中引用DWG控件,交互绘图,和响应鼠标点击对象的方法[MXDRAW CAD控件文档]下面帮助的完整例子,在控件安装目录的Sample\Ie\iedemo.htm中. 主要用到函数说明A. ImplementCommandEventFun控件的命令事件函数,与用户交互的操作,需要放到命令事件函数内实现,这样控件才能保证正常的Windows 消息循环被处理.B. ImplementMouseEventFun控件的鼠标事件函数,可以用JS程序里,响应鼠标事件,详细说明如下:void MouseE

如何在网页中捕获鼠标轨迹并输出

如何在网页中捕获鼠标轨迹并输出 1.      js捕获鼠标轨迹并输出 1.1.    js脚本如下: <script> window.addEventListener('load',function(){ var pad = document.getElementsByClassName('track-pad')[0]; var monitor = document.getElementsByClassName('track-monitor')[0]; var coordinate = do

在WebBrowser中通过模拟键盘鼠标操控网页中的文件上传控件

在WebBrowser中通过模拟键盘鼠标操控网页中的文件上传控件 引言 这两天沉迷了Google SketchUp,刚刚玩够,一时兴起,研究了一下WebBrowser. 我在<WebBrowser控件使用技巧分享>一文中曾谈到过"我现在可以通过WebBrowser实现对各种Html元素的操控,唯独无法控制Html的上传控件",出于安全原因,IE没有对上传控件提供操控支持,这使得我们没法像控制其他控件一样用简单的代码进行赋值. 比较实际的解决方案就是模拟操作了,下面我就将演示