精华内容
下载资源
问答
  • window.event IE:有window.event对象 FF:没有window.event对象。可以通过给函数参数传递event对象。如onmousemove=doMouseMove(event) 鼠标... FF:event.layerX和event.layerY。 标签x和y坐标位置:sty
  • PageX/Y:返回鼠标指针位置,相对于文档左边缘与上边缘,会随着页面滚动而改变兼容性:除IE6/7/8不支持外,其余浏览器均支持<html><head><script type="text/javascript...

    PageX/Y:返回鼠标指针的位置,相对于文档的左边缘与上边缘会随着页面滚动而改变

    兼容性:除IE6/7/8不支持外,其余浏览器均支持

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $(document).mousemove(function(e){ 
        $("span").text("X: " + e.pageX + ", Y: " + e.pageY); 
      });
    });
    </script>
    </head>
    <body>
    <p>鼠标指针位于: <span></span></p>
    </body>
    </html>

    clientX/Y 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标/垂直坐标。客户区指的是当前窗口。

    clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变

    兼容性:所有浏览器均支持


    offsetX/Y获取到是触发点相对被触发dom的左上角距离,不过左上角基准点在不同浏览器中有区别,其中在IE中以内容区左上角为基准点不包括边框,如果触发点在边框上会返回负值,而chrome中以边框左上角为基准点。

    兼容性:IE所有版本,chrome,Safari均完美支持,Firefox不支持


    layerX/Y获取到的是触发点相对被触发dom左上角的距离,数值与offsetX/Y相同,这个变量就是firefox用来替代offsetX/Y的,基准点为边框左上角,但是有个条件就是,被触发的dom需要设置为position:relative或者position:absolute,否则会返回相对html文档区域左上角的距离

    兼容性:IE6/7/8不支持,opera不支持,IE9/10和Chrome、Safari均支持


    screenX/Y 事件属性可返回事件发生时鼠标指针相对于屏幕的水平坐标/垂直坐标

    screenX/Y获取到的是触发点相对显示器屏幕左上角的距离,不随页面滚动而改变

    兼容性:所有浏览器均支持



    展开全文
  • layerX && layerY

    2015-05-23 21:59:00
    转载:https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/layerX UIEvent.layerX  非标准  这个属性是非标准的属性...在不同的浏览器上的实现由许多的兼容性问题。  而且,这个属性的行为将来还可能...

    转载:https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/layerX

    UIEvent.layerX

      非标准

      这个属性是非标准的属性,并且也没有那个标准说要使用它。

      如果你要使用它,请不要使用在你的Web产品上。那会不对一些用户起作用的。在不同的浏览器上的实现由许多的兼容性问题。

      而且,这个属性的行为将来还可能改变。

    这个属性会返回这个事件相对于它相应的层的横坐标。

    Syntax

    var xpos = event.layerX

    这里有一段代码,提供给大家用于理解这个属性

    Example

    <html>
    <head>
    <title>pageX\pageY & layerX\layerY example</title>
    
    <script type="text/javascript">
    
    function showCoords(evt){
      var form = document.forms.form_coords;
      var parent_id = evt.target.parentNode.id;
      form.parentId.value = parent_id;
      form.pageXCoords.value = evt.pageX;
      form.pageYCoords.value = evt.pageY;
      form.layerXCoords.value = evt.layerX;
      form.layerYCoords.value = evt.layerY;
    }
    </script>
    
    <style type="text/css">
    
     #d1 {
      border: solid blue 1px;
      padding: 20px;
     }
    
     #d2 {
      position: absolute;
      top: 180px;
      left: 80%;
      right:auto;
      width: 40%;
      border: solid blue 1px;
      padding: 20px;
     }
    
     #d3 {
      position: absolute;
      top: 240px;
      left: 20%;
      width: 50%;
      border: solid blue 1px;
      padding: 10px;
     }
    
    </style>
    </head>
    
    <body οnmοusedοwn="showCoords(event)">
    
    <p>To display the mouse coordinates please click anywhere on the page.</p>
    
    <div id="d1">
    <span>This is an un-positioned div so clicking it will return
    layerX/layerY values almost the same as pageX/PageY values.</span>
    </div>
    
    <div id="d2">
    
    <span>This is a positioned div so clicking it will return layerX/layerY
    values that are relative to the top-left corner of this positioned
    element. Note the pageX\pageY properties still return the
    absolute position in the document, including page scrolling.</span>
    
    <span>Make the page scroll more! This is a positioned div so clicking it
    will return layerX/layerY values that are relative to the top-left
    corner of this positioned element. Note the pageX\pageY properties still
    return the absolute position in the document, including page
    scrolling.</span>
    
    </div>
    
    <div id="d3">
    <form name="form_coords" id="form1">
     Parent Element id: <input type="text" name="parentId" size="7" /><br />
     pageX:<input type="text" name="pageXCoords" size="7" />  
     pageY:<input type="text" name="pageYCoords" size="7" /><br />
     layerX:<input type="text" name="layerXCoords" size="7" />  
     layerY:<input type="text" name="layerYCoords" size="7" />
    </form>
    </div>
    
    </body>
    </html>

     

     

    转载于:https://www.cnblogs.com/fenggu/p/4525015.html

    展开全文
  • 浏览器兼容性 clientX,clientY 浏览器窗口 所有 layerX,layerY 最近绝对定位父节点,如果没有,则为document Firefox,Chrome,Safari offsetX,offsetY 事件目标对象 所有,Firefox除外
    JavaScript中的event对象一共有六对鼠标位置的属性。分别如下:
    
    属性对 参考点 浏览器兼容性
    clientX,clientY 浏览器窗口 所有
    layerX,layerY
    最近的绝对定位的父节点,如果没有,则为document Firefox,Chrome,Safari
    offsetX,offsetY 事件目标对象 所有,Firefox除外
    pageX,pageY document对象 所有,IE除外
    ScreenX,ScreenY 计算机屏幕 所有
    x,y 尽量不要用它,兼容性差 IE9及以下
    展开全文
  • 关于js鼠标事件综合各大浏览器能获取到坐标属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.screenX/Y ...兼容性:所有浏览器均支持 pageX/Y: pageX/Y获取到...

    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种

    event.clientX/Y
    event.pageX/Y
    event.offsetX/Y
    event.layerX/Y
    event.screenX/Y

    clientX/Y:

    clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变

    兼容性:所有浏览器均支持

    pageX/Y:

    pageX/Y获取到的是触发点相对文档区域左上角距离,会随着页面滚动而改变

    兼容性:除IE6/7/8不支持外,其余浏览器均支持

    offsetX/Y:

    offsetX/Y获取到是触发点相对被触发dom的左上角距离,不过左上角基准点在不同浏览器中有区别,其中在IE中以内容区左上角为基准点不包括边框,如果触发点在边框上会返回负值,而chrome中以边框左上角为基准点。

    兼容性:IE所有版本,chrome,Safari均完美支持,Firefox不支持

    layerX/Y:

    layerX/Y获取到的是触发点相对被触发dom左上角的距离,数值与offsetX/Y相同,这个变量就是firefox用来替代offsetX/Y的,基准点为边框左上角,但是有个条件就是,被触发的dom需要设置为position:relative或者position:absolute,否则会返回相对html文档区域左上角的距离

    兼容性:IE6/7/8不支持,opera不支持,IE9/10和Chrome、Safari均支持

    screenX/Y:

    screenX/Y获取到的是触发点相对显示器屏幕左上角的距离,不随页面滚动而改变

    兼容性:所有浏览器均支持

    以上内容收集自网络

    日常工作中,常用到offsetX,下面提供两个据说比较靠谱的获取方案,兼容多浏览器,欢迎指正。

    方案一(在使用,获取的是在当前页面内的全局坐标,若需要使用相对父级容器的坐标,可以使用jQuery的offset或者原生js等方式获取元素坐标,进一步计算,鼠标相对元素的相对坐标):

    
     
    1. var getPosition = function(event) {
    2. var e = event || window.event;
    3. return {
    4. x: e.pageX || e.clientX + document.documentElement.scrollLeft || document.body.scrollLeft,
    5. y: e.pageY || e.clientY + document.documentElement.scrollTop || document.body.scrollTop
    6. };
    7. };

    原生js获取元素所在坐标,用于计算鼠标在元素内的相对坐标

    
     
    1. var getElPosition = function(el){
    2. var t = el.offsetTop,
    3. l = el.offsetLeft;
    4. while( el = el.offsetParent){
    5. t += el.offsetTop;
    6. l += el.offsetLeft;
    7. }
    8. return {
    9. x : l ,
    10. y : t
    11. };
    12. };

    方案二(获取相对父级容器的坐标,但是这个方法在IE11模拟的IE8下好像有点问题,推荐采用第一种方案进行改进):

    
     
    1. var getPosition = function(event){
    2. var evt =event||window.event;
    3. var srcObj = evt.target || evt.srcElement;
    4. if (evt.offsetX){
    5. return {
    6. x:evt.offsetX,
    7. y:evt.offsetY
    8. };
    9. }else{
    10. var rect = srcObj.getBoundingClientRect();
    11. return {
    12. x:evt.clientX - rect.left,
    13. y:evt.clientY - rect.top
    14. }
    15. }
    16. };

     

    参考:

    http://www.poorren.com/javascript-got-mouse-position

    https://segmentfault.com/q/1010000005056035

    http://codepen.io/flybywind/pen/KzbwLM

    展开全文
  • 关于js鼠标事件综合各大浏览器能获取到坐标属性...clientX/Y:clientX/Y获取到是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变兼容性:所有浏览器均支持pageX/Y:pageX/Y获取到是触发点相对文档区域左
  • 关于js鼠标事件综合各大浏览器能获取到坐标属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.screenX/Y clientX/Y: clientX/Y获取到是触发点相对浏览器可视...兼容性
  • 关于js鼠标事件综合各大浏览器能获取到坐标属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y ... event.layerX/Y ...clientX/Y获取到是触发点相对浏览器可视...兼容性:所有浏览器均支持...
  • 关于js鼠标事件综合各大浏览器能获取到坐标属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y ...兼容性:所有浏览器均支持pageX/Y:pageX/Y获取到是触发点相对文档区
  • clientX/Y: clientX/Y获取到是触发点相对...兼容性:所有浏览器均支持 pageX/Y: pageX/Y获取到是触发点相对文档区域左上角距离,会随着页面滚动而改变 兼容性:除IE6/7/8不支持外,其余浏览器均支持 of...
  • Event对象 Event对象代表事件状态,比如事件在其中发生元素、键盘按键状态、鼠标位置、鼠标按钮状态。... 浏览器兼容性 FF:没有window.event对象。可以通过给函数参数传递event对象。
  • 前端兼容路上风景

    2010-12-19 15:14:00
    2.mouseover和mouseout具有事件发散,就像冒泡,会穿透遮盖图层。 3.相对文档坐标除mozilla为layerX,layerY以外,其他浏览器都是offsetX,offsetY 4.取MouseEvent:arguments[0]||window.event;...
  • 1.event.srcElement 代码如下: //srcElement只能在IE下使用target是FireFox使用,下面是兼容性写法 var obj = e.srcElement ? e.srcElement : e.target; 2.e.originalEvent.x 代码如下: // e.originalEvent.x 只能...
  • //修正事件对象 处理兼容性 fixEvent:function(e){ var e = e || window.event; if(!e.target){ //IE e.target = e.srcElement; //触发事件对象 e.layerX = e.offsetX; //...
  • JS 获取坐标

    2020-03-03 16:35:01
    可能存在事实误导[尤其是兼容性,建议自行测试](如有错误还请不吝赐教~博主将会及时订正 参考文献在文末列出,更多细节...pageX:鼠标指针距离文档左侧边缘距离,随滚动条变化而变化 【兼容性:所有浏览器均支持...
  • vue 鼠标坐标

    千次阅读 2019-07-20 14:08:23
    方法介绍 关于js鼠标事件获取到坐标属性总共以下五种: event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.screenX/Y ...clientX/Y获取到是触发点相对...兼容性:所有浏览器均支持 p...
  • 关于js鼠标事件综合各大浏览器能获取到坐标属性总共以下五种: event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.screenX/Y ...兼容性:所有浏览器均支持 pageX/Y: page...
  • 它是轻量级js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX...

空空如也

空空如也

1 2
收藏数 25
精华内容 10
关键字:

layerx的兼容性