js事件对象坐标

js事件对象坐标---贴上代码

<body style="position:relative;width:100%;height:100%;padding:15px;margin:20px;">
    <div style="position:absolute;top:100px;left:100px;width:500px;height:500px;padding:5px;margin:9px;background:#ddd;" onclick="xy(event)">

    </div>
</body>

        /*********************************
        event.clientX、event.clientY
        鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

        event.pageX、event.pageY
        类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。

        event.offsetX、event.offsetY
        鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。（本地测试所有浏览器都有这个属性）

        event.layerX, event.layerY
        鼠标相对于事件源元素（srcElement）的X,Y坐标，在Firefox下使用

        event.screenX、event.screenY
        鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性
        *******************************/
        function xy(event) {
            var event = event ? event : window.event;
            console.log("clientX:" + event.clientX + "," + "clientY:" + event.clientY);
            console.log("pageX:" + event.pageX + "," + "pageY:" + event.pageY);
            console.log("x:" + event.x + "," + "y:" + event.y);
            console.log("offsetX:" + event.offsetX + "," + "offsetY:" + event.offsetY);
            console.log("layerX:" + event.layerX + "," + "layerY:" + event.layerY);
            console.log("screenX:" + event.screenX + "," + "screenY:" + event.screenY);
        }

        /*****************************
        FF:clientX,pageX 相对于浏览器窗口可视区域（浏览器左边加上自身的padding-left）注：x在FF中无效
        Chrome:clientX,pageX,x 相对于浏览器窗口可视区域（浏览器左边加上自身的padding-left）
        Opera:clientX,pageX,x 相对于浏览器窗口可视区域（浏览器左边加上自身的padding-left）
        IE7:clientX相对于浏览器窗口可视区域（浏览器左边加上自身的padding-left，有小小的偏差），pageX无效，clientX多了两个像素，x比clientX小，基本上等于去掉margin个padding之后的值
        IE8:clientX相对于浏览器窗口可视区域（浏览器左边加上自身的padding-left，有小小的偏差），pageX无效，x比clientX小，基本上等于去掉margin个padding之后的值
        IE9以上:clientX,pageX,x 相对于浏览器窗口可视区域（浏览器左边加上自身的padding-left），x浏览器左边加上自身的margin-left

        clientX全部浏览器支持,IE7,8有小小偏差

        pageX IE7,8不支持

        x FF不支持

        IE8以下不支持offsetX属性，其他都ok

        offsetX全部浏览器支持

        screenX全部浏览器支持
        *****************************/

 参考文章 ： http://blog.sina.com.cn/s/blog_780a94270101kdgo.html
            http://www.2cto.com/kf/201409/333401.html

时间： 2024-12-26 17:15:30

js事件对象坐标的相关文章

Js事件对象EventUtil

1 var EventUtil = { 2 getEvent: function(event){ //获取事件对象 3 return event ? event : window.event; 4 }, 5 addHandler: function(element, type, handler){ //绑定事件 6 if (element.addEventListener) { 7 element.addEventListener(type, handler, false); 8 } else

JS 事件对象和事件冒泡

1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象的获取方法: IE中可以window.event直接获取,而Firefox中则不可以,可通过如下方法获取: 1)var event = window.event || arguments.callee.caller.arguments[0]; 2)通过参数传.function(e) { var event = window.event || e; } 2.事件源事件源即

JS 事件对象

事件对象事件处理函数的一个标准特性是,以某些方式访问的事件对象包含有关于当前事件的上下文信息. 事件处理三部分组成:对象.事件处理函数=函数.例如:单击文档任意处. document.onclick = function () { alert('Lee'); }; PS:以上程序的名词解释:click 表示一个事件类型,单击.onclick 表示一个事件处理函数或绑定对象的属性(或者叫事件监听器.侦听器).document 表示一个绑定的对象,用于触发某个元素区域.function()匿

JS事件对象 (event)

#事件对象 (event) div.onclick = function(event){ console.log(event); let e = event||window.event;解决兼容性 } ##事件对象的属性 1)target 目标对象:e.target(获取触发事件的元素) 2)this 指向绑定的元素 ###鼠标相关的属性 1)相对于浏览器(文档显示区)的坐标:clientX.clientY 2) 相对于页面的坐标:pageX.pageY:如果有滚动条,会计算隐藏的坐标 3)相对

JS—事件对象

事件对象: 在触发DOM事件的时候都会产生一个对象事件对象Event: 1)type:获取事件类型 2)target:获取事件目标 3)stopPropagation():阻止事件冒泡 4)preventDefault():阻止事件默认行为 <div id="div"> <button id="btn">按钮</button> <a href="www.baidu.com" id="aid&q

JS:事件对象1

一,this关键字和上下文 var box = document.getElementById("box");. 普通的函数如果没有给他传递参数,函数本身是没有参数的. test(); //0 function test () { alert(arguments.length); } 但是在事件对象中是有参数的,他是通过浏览器把这个对象作为参数传递过来的. box.onclick = function() { alert(arguments.length);// 1 alert(a

js事件对象

哎,事件也有对象呦.程序员一直在讲对象对象,那么,过年是不是该带个对象回家呢?好了,既然事件有对象,承认这个事实吧!哈哈,那么,其就有属性,接下来,就放个例子来讲讲,顺便把常用的属性也添加进去.. Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&

js事件对象兼容性写法

dom0级事件处理时,使用属性方式注册事件处理函数: IE8和IE8以下浏览器不能传递参数,只能使用window.event对象.谷歌浏览器既可以传递事件对象参数,也可以使用window.envent对象火狐浏览器只能使用传递的事件对象参数. 兼容写法: function fn(e){ e=e||window.event; alert(e.type); }

js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象

事件对象在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对象中,会包含鼠标位置的信息,而键盘操作导致的事件对象中,会包含与按下的键有关的信息.所有浏览器对象都支持event对象,但支持方式不同. DOM中的事件对象兼容DOM的浏览器会将一个event对象传入到事件处理程序中.无论指定事件处理程序时使用什么方法(DOM0级或DOM2级),都会传入event