JS获取鼠标坐标位置实例分析,js实例分析

取鼠标坐标位置有这些:鼠标在视口的坐标位置(clientX,clientY),鼠标在页面的坐标位置(pageX,pageY),鼠标在屏幕的坐标位置(screenX,screenY),其中鼠标在视口的坐标位置(clientX,clientY),以及鼠标在屏幕的坐标位置(screenX,screenY)在所有的浏览器中都支持,但是鼠标在页面的坐标位置(pageX,pageY)在IE8及更早版本不支持,但是没有关系,可以通过scrollLeft
和 scrollTop可以计算出pageX,pageY的值。

JS获取鼠标坐标位置实例分析,js实例分析

本文实例分析了JS获取鼠标坐标位置的方法。分享给大家供大家参考,具体如下:

取鼠标坐标位置有这些:鼠标在视口的坐标位置(clientX,clientY),鼠标在页面的坐标位置(pageX,pageY),鼠标在屏幕的坐标位置(screenX,screenY),其中鼠标在视口的坐标位置(clientX,clientY),以及鼠标在屏幕的坐标位置(screenX,screenY)在所有的浏览器中都支持,但是鼠标在页面的坐标位置(pageX,pageY)在IE8及更早版本不支持,但是没有关系,可以通过scrollLeft
和 scrollTop可以计算出pageX,pageY的值。

首先是跨浏览器的事件对象

var EventUtil = {
  addHandler:function(elem,type,handler){
    if(elem.addEventListener)
    {
      elem.addEventListener(type,handler,false);
    }else if(elem.attachEvent)
    {
      elem.attachEvent("on"+type,handler);
    }else
    {
      elem["on"+type]=handler;
    }
  },
  removeHandler:function(elem,type,handler){
    if(elem.removeEventListener)
    {
      elem.removeEventListener(type,handler,false);
    }else if(elem.detachEvent)
    {
      elem.detachEvent("on"+type,handler);
    }else
    {
      elem["on"+type]=null;
    }
  },
  getEvent:function(event){
    return event?event:window.event;
  },
  getTarget:function(event){
    return event.target||event.srcElement;
  },
  preventDefault:function(event){
    if(event,preventDefault){
      event.preventDefault();
    }else{
      event.returnValue = false;
    }
  },
  stopPropagation:function(event){
    if(event.stopPropagation){
      event.stopPropagation();
    }else{
      event.cancelBubble=true;
    }
  }
};

1.视口坐标位置

var div = document.getElementById("myDiv");
EventUtil.addHandler(div,"click",function(event){
   event = EventUtil.getEvent(event);
   alert("Client coordinages: "+event.clientX+","+event.clientY);
});

2.屏幕坐标位置

var div = document.getElementById("myDiv");
EventUtil.addHandler(div,"click",function(event){
   event = EventUtil.getEvent(event);
   alert("Screen coordinates: "+event.screenX+","+event.screenY);
});

3.页面坐标位置

var div = document.getElementById("myDiv");
EventUtil(div,"click",function(event){
   event = EventUtil.getEvent(event);
   var pageX = event.pageX;
   var pageY = event.pageY;
   if(pageX==undefined)
  {
     pageX=event.clientX+document.body.scrollLeft||document.documentElement.scrollLeft;
  }
   if(pageY==undefined)
   {
     pageY = event.clientY+document.body.scrollTop||document.documentElement.scrollTop;
   }
   alert("Page coordinates: "+pageX+","+pageY);
});

更多关于JavaScript鼠标操作相关内容感兴趣的读者可查看本站专题:《JavaScript鼠标操作技巧汇总》

希望本文所述对大家JavaScript程序设计有所帮助。

**简单代码即可实现,然而这是还不够,因为绝大多数情况下我们希望获取鼠标点击位置相对于浏览器窗口的坐标,event的clientX,clientY属性分别表示鼠标点击位置相对于文档的左边距,上边距。于是类似的我们写出了这样的代码

首先是跨浏览器的事件对象

您可能感兴趣的文章:

  • js与jquery中获取当前鼠标的x、y坐标位置的代码
  • javascript实时获取鼠标坐标值并显示的方法
  • js使用onmousemove和onmouseout获取鼠标坐标的方法
  • JS网页在线获取鼠标坐标值的方法
  • javascript获取当前鼠标坐标的方法
  • JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
  • JS获取鼠标坐标、获取鼠标像素点示例
  • JS onmousemove鼠标移动坐标接龙DIV效果实例
  • 在页面中js获取光标/鼠标的坐标及光标的像素坐标
  • JS获取鼠标坐标的实例方法
  • js获得鼠标的坐标值的方法
  • js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性

本文实例分析了JS获取鼠标坐标位置的方法。分享给大家供大家参考,具体如下:
取鼠标坐标位…

您可能感兴趣的文章:

  • js与jquery中获取当前鼠标的x、y坐标位置的代码
  • js 获取坐标
    通过JS得到当前焦点(鼠标)的坐标属性
  • JavaScript获取鼠标坐标的函数(兼容IE、FireFox、Chrome)
  • js获得鼠标的坐标值的方法
  • 通过百度地图获取公交线路的站点坐标的js代码
  • javascript 事件对象
    坐标事件说明
  • js Event对象的5种坐标
  • 通过JS 获取Mouse
    Position(鼠标坐标)的代码
  • JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
  • JavaScript实现二维坐标点排序效果

2.屏幕坐标位置

Web前端,复制代码 代码如下:

更多关于JavaScript鼠标操作相关内容感兴趣的读者可查看本站专题:《JavaScript鼠标操作技巧汇总》

function getMousePos(event) {
            var e = event || window.event;
            return {‘x’:e.clientX,’y’:clientY}
        }

希望本文所述对大家JavaScript程序设计有所帮助。

**相对文档

var div = document.getElementById("myDiv");
EventUtil(div,"click",function(event){
   event = EventUtil.getEvent(event);
   var pageX = event.pageX;
   var pageY = event.pageY;
   if(pageX==undefined)
  {
     pageX=event.clientX+document.body.scrollLeft||document.documentElement.scrollLeft;
  }
   if(pageY==undefined)
   {
     pageY = event.clientY+document.body.scrollTop||document.documentElement.scrollTop;
   }
   alert("Page coordinates: "+pageX+","+pageY);
});

在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊声明代码在IE8,FireFox,Chrome下进行测试兼容

var EventUtil = {
  addHandler:function(elem,type,handler){
    if(elem.addEventListener)
    {
      elem.addEventListener(type,handler,false);
    }else if(elem.attachEvent)
    {
      elem.attachEvent("on"+type,handler);
    }else
    {
      elem["on"+type]=handler;
    }
  },
  removeHandler:function(elem,type,handler){
    if(elem.removeEventListener)
    {
      elem.removeEventListener(type,handler,false);
    }else if(elem.detachEvent)
    {
      elem.detachEvent("on"+type,handler);
    }else
    {
      elem["on"+type]=null;
    }
  },
  getEvent:function(event){
    return event?event:window.event;
  },
  getTarget:function(event){
    return event.target||event.srcElement;
  },
  preventDefault:function(event){
    if(event,preventDefault){
      event.preventDefault();
    }else{
      event.returnValue = false;
    }
  },
  stopPropagation:function(event){
    if(event.stopPropagation){
      event.stopPropagation();
    }else{
      event.cancelBubble=true;
    }
  }
};

如果是涉及到鼠标点击确定位置相对比较简单,获取到鼠标点击事件后,事件screenX,screenY获取的是点击位置相对于屏幕的左边距与上边距,不考虑iframe因素,不同浏览器下表现的还算一致。

3.页面坐标位置

**相对浏览器窗口

var div = document.getElementById("myDiv");
EventUtil.addHandler(div,"click",function(event){
   event = EventUtil.getEvent(event);
   alert("Screen coordinates: "+event.screenX+","+event.screenY);
});

鼠标点击位置坐标
相对于屏幕

本文实例分析了JS获取鼠标坐标位置的方法。分享给大家供大家参考,具体如下:

复制代码 代码如下:

var div = document.getElementById("myDiv");
EventUtil.addHandler(div,"click",function(event){
   event = EventUtil.getEvent(event);
   alert("Client coordinages: "+event.clientX+","+event.clientY);
});

function getMousePos(event) {
            var e = event || window.event;
            var scrollX = document.documentElement.scrollLeft ||
document.body.scrollLeft;
            var scrollY = document.documentElement.scrollTop ||
document.body.scrollTop;
            var x = e.pageX || e.clientX + scrollX;
            var y = e.pageY || e.clientY + scrollY;
            //alert(‘x: ‘ + x + ‘\ny: ‘ + y);
            return { ‘x’: x, ‘y’: y };
        }

1.视口坐标位置

function getMousePos(event) {
            var e = event || window.event;
            return {‘x’:e.screenX,’y’:screenY}
        }

您可能感兴趣的文章:

  • js实现获取div坐标的方法
  • javascript获取文档坐标和视口坐标
  • javascript实时获取鼠标坐标值并显示的方法
  • js使用onmousemove和onmouseout获取鼠标坐标的方法
  • JS网页在线获取鼠标坐标值的方法
  • javascript获取当前鼠标坐标的方法
  • JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
  • JS
    onmousemove鼠标移动坐标接龙DIV效果实例
  • js鼠标及对象坐标控制属性详细解析
  • JavaScript获取对象在页面中位置坐标的方法

复制代码 代码如下:

**简单测试也没什么问题,但是clientX与clientY获取的是相对于当前屏幕的坐标,忽略页面滚动因素,这在很多条件下很有用,但当我们需要考虑页面滚动,也就是相对于文档(body元素)的坐标时怎么办呢?加上滚动的位移就可以了,下边我们试试怎么计算页面滚动的位移。
其实在Firefox下问题会简单很多,因为Firefox支持属性pageX,与pageY属性,这两个属性已经把页面滚动计算在内了。
在Chrome可以通过document.body.scrollLeft,document.body.scrollTop计算出页面滚动位移,而在IE下可以通过document.documentElement.scrollLeft
,document.documentElement.scrollTop