鼠标位置相关属性

 1、offsetX,offsetY:

是event的属性,非DOM元素的属性

含义:设置或者是得到鼠标相对于目标事件的父元素的位置,从父元素的边框位置计算起。

IE中的属性,  经测试新版的chrome 、FF都支持(测试环境 chrome43 FF34)

2、pageX,pageY

是event的属性,非DOM元素的属性

含义:相对于页面的位置

主流浏览器如FF chrome支持    ie8及以下不支持 (但是IE中有一个替补属性 e.x,e.y     和pageX、Y是一样的效果)

3、offsetLeft、offsetTop

offsetTop、left:是DOM元素的属性,都支持 但浏览器解析不一样
 在IE7及以下:直接相对于父元素
 IE8以及其他浏览器:该属性表示的是DOM对象在“该DOM对象的层级关系中离该对象最近的,设置了position的父对象”中的位置,如果没有找到,则是相对于根元素 html的位置(而不是body)

4、浏览器默认的margin padding值
 关于body的padding margin:

主流浏览器和IE8: margin:8px
 ie7以及以下:margin:15px padding:medium

5、offsetParent

含义: 向上寻找父元素,且父元素使用了定位方式。如果向上找不到定位的父元素,则返回body

否则返回这个定位的父元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mouse position</title>
    <style>
    /* body{margin:0;padding:0;} */
    #posDiv{
        /* position: relative;  */
        width:800px;
        height:500px;
        border:1px solid red;

        }
        #noposDiv{
            width:100px;
            height: 100px;
            border:10px solid green;
            margin-left:100px;

        }

    </style>
</head>
<body>

   <div id="posDiv">
          <div id="noposDiv">
          </div>
   </div>

   <script>
   var offParent = document.getElementById(‘noposDiv‘).offsetParent;
   console.log(‘offParent‘,offParent);

   /**
    * offsetX,offsetY:是event的属性,IE 和新版的chrome 、FF都支持
    * pageX : ie8及以下不支持,其他主流浏览器FF chrome支持
    *
    * offsetTop、left:是DOM元素的属性,都支持  但浏览器解析不一样
    *     在IE7及以下:直接相对于父元素
    *      IE8以及其他浏览器:该属性表示的是DOM对象在“该DOM对象的层级关系中离该对象最近的,设置了position的父对象”中的位置,如果没有找到,则是相对于根元素 html的位置
    *
    *
    * 关于body的padding margin:  主流浏览器和IE8: margin:8px
    *                             ie7以及以下:margin:15px padding:medium
    *
    * offsetParent:  向上寻找父元素,且父元素使用了定位方式。如果向上找不到定位的父元素,则返回body
    *                 否则返回这个定位的父元素。
    * @type {[type]}
    */
   var noposDiv = document.getElementById(‘noposDiv‘);
   if(noposDiv.addEventListener){
           noposDiv.addEventListener(‘click‘,function (e){

               var evtx = e.offsetX;
               var evty = e.offsetY;
               var pagex = e.pageX;
               var pagey = e.pageY;
               var offLeft = noposDiv.offsetLeft;
               var offTop = noposDiv.offsetTop;
               var x = e.x;
               var y = e.y;

               console.log(‘offsetx y‘,evtx,evty);
               console.log(‘pagex y‘,pagex,pagey);
               console.log(‘div元素的属性 offLeft ‘,offLeft,offTop);
               console.log(‘e.x,e.y‘,e.x,e.y);   ///在chrome中 与pageX一样;  FireFox不支持该属性

           },false);
   }else if(noposDiv.attachEvent){
        noposDiv.attachEvent(‘onclick‘,function (e){
                var evtx = e.offsetX;
               var evty = e.offsetY;
               var pagex = e.pageX;
               var pagey = e.pageY;
               var offLeft = noposDiv.offsetLeft;
               var offTop = noposDiv.offsetTop;
               var x = e.x;
               var y = e.y;

               console.log(‘offsetx y‘,evtx,evty);
               console.log(‘pagex y‘,pagex,pagey);
               console.log(‘div元素的属性 offLeft ‘,offLeft,offTop);
               console.log(‘e.x,e.y‘,e.x,e.y);

        });

   }

   </script>

</body>
</html>
时间: 2024-11-11 01:29:00

鼠标位置相关属性的相关文章

JS魔法堂:关于元素位置和鼠标位置的属性

一.关于鼠标位置的属性   1. 触发鼠标事件的区域 盒子模型中的border,padding,content区域会触发鼠标事件,点击margin区域将不触发鼠标事件.   2. 鼠标事件对象MouseEvent下的属性 [a].  evt.pageX/Y :以页面左上角为参考点,表示当前触发点离页面左上角的水平和垂直距离. 注意:1. IE5.5~8不支持该属性,polyfill方法pageX = clientX + scrollLeft 2. 页面左上角并不是指html或body标签的盒子模

定位的相关属性

定位方式相关属性 position 取值: 1.static : 默认,静态定位 2.relative : 相对定位 3.absolute : 绝对定位 4.fixed : 固定定位 2.与定位位置相关属性 top bottom left right 以像素为单位的值 3.堆叠顺序 z-index : value; 值越大越靠近用户 4.static 页面中默认定位方式,即文档流定位 5.相对定位 相对于当前元素本身出现的位置而实现定位的一种方式 实现方式: position:relative;

鼠标位置属性总结

鼠标位置 序号 鼠标位置属性 属性描述 浏览器支持情况 备注 IE Chrome Safari  Firefox Opera 1 event.x 以浏览器窗口可见部分的左上角为坐标原点(不含滚动条) √ √ √  X √   2 event.y 以浏览器窗口可见部分的左上角为坐标原点(不含滚动条) √ √ √  X √   3 event.clientX 以浏览器窗口可见部分的左上角为坐标原点(不含滚动条) √ √ √  √ √   4 event.clientY 以浏览器窗口可见部分的左上角为

js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)

网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;(点击查看大图) 网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);(点击查看大图)有没有发现,offsetWidth和clientWidth的区别,offsetWidt是连滚动条一起包含在内的. 网页正文全文宽: documen

css列表相关属性

列表相关属性: 1.list-style-image:自定义项目符号,允许指定一个外部图标文件,以满足个性化设计需求: 2.list-style-position:定义项目符号的显示位置,改属性值包括outside和inside,其中outside表示把项目符号显示在列表项的文本行以外,列表符号默认显示为outside,inside表示吧项目符号显示在列表项文本行以内: 3.list-style-type:定义列表项目符号的类型. 4.list-style-type:none;隐藏列表结构的默认

Cocos2d入门--1-- 初涉相关属性或代码

 Cocos2d入门--1-- 初涉相关属性或代码 Cocos2d vision:  cocos2d-x-3.8.1 万丈高楼,起于累土.对于一个游戏框架的学习,其实在于框架功能的使用积累,学会了如何在cocos2d游戏引擎的基础上使用它提供的各种功能,并灵活运用, 以及学会查阅Cocos2d官方提供的API文档.相信自己也能开发出自己喜爱或者让别人羡慕的游戏. 目录: 1>认识origin和visibleSize以及cocos2d的基础绘画类DrawNode的简单实用 2>认识 CCLOG(

前端笔记九,背景、边框和补丁相关属性

常用的背景相关属性:以下属性均在style内设置 background:设置对象的背景样式,不建议直接通过该属性来控制 background-attachment:设置背景图片是随对象内容滚动还是固定的,可选值: scroll:会随内容的滚动而滚动 fixed:背景图片固定 background-color:设置背景色,如果设置了背景图片则会覆盖背景色 background-image:设置背景图片,使用url()函数 background-position:设置对象的背景图片的位置,第一个表示

鼠标位置(跨浏览器)

一.鼠标事件属性 1.clientX,clientY 相对于可见视点(visual viewport)的鼠标位置,即当前浏览器显示区域(窗口)的位置,点击客户端矿口的左上角时 clientX 和 clientY 都为0,即使用户拖动了水平或垂直滚动条 document.onclick=function(e){ var event=e||window.event; console.log(event.clientX+","+ event.clientY); } 2.screenX,scr

frame、bounds表示大小和位置的属性以及center、position、anchorPosition

在iOS开发开发过程中经常会用到界面元素的frame.bounds表示大小和位置的属性以及center.position.anchorPosition等单纯表示位置的属性.这些属性究竟什么含义?彼此间又什么关系呢?下面就来浅谈一番. 首先来说说frame和bounds. frame:描述当前界面元素在其父界面元素中的位置和大小.        bounds:描述当前界面元素在其自身坐标系统中的位置和大小.        iOS以左上角为坐标原点(0,0),以原点向右侧为X轴正方向,原点下侧为Y轴