jQuery练习题 – 源码集中营

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jq获取鼠标的位置</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color: #585858;
            margin: 0;
            padding: 0;
        }
    </style>
    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="d">

</div>
</body>
<script type="text/javascript">
    $('#d').mousemove(function(f){
        /* var xx = f.originalEvent.x|| f.originalEvent.layerX||0;
         var yy = f.originalEvent.y|| f.originalEvent.layerY||0;*/
        var xx = f.pageX;
        var yy = f.pageY;
        $(this).text(xx+','+yy);
    })
    /*根据出现的“originalEvent”一词可猜测题主的本意是比较jquery下
     e.pageX和e.originalEvent.x的区别（因为originalEvent是jq在对构造一个jq版e对象后引用的原始e对象）。

     根据jq源码，jq版e对象下的pageX和原生的pageX是一致的，但是增加了对旧版本IE的实现部分。

     于是题目可蜕化为原生e.pageX与e.x的区别，以及jq为IE8-浏览器实现的e.pageX与原生e.x的区别。
     考虑jq的跨平台特性，我们在不清楚具体情况的时候，直接通过其补丁的实现方式来猜测属性的定义。

     根据jq对无原生pageX的浏览器的补丁实现
     event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 )
     - ( doc && doc.clientLeft || body && body.clientLeft || 0 );
     到这里我们已经基本清楚pageX的涵义，是包含了滚动条的计算的。

     实际上，e.pageX在各（支持的）浏览器下的表现都是一致的，都是表达点击位置相对于整个文档的位置，用题主的话说就是“计算了滚动条”。
     兼容性来说，e.pageX除了在IE系列中低于IE9的版本中是不支持的，IE9+和其它主流浏览器全部一致支持。

     可是e.x的情况很复杂……
     首先，fx不支持e.x。这没啥好说的。

     其次，除IE外的其它主流浏览器，opera、chrome（以及其它同内核的浏览器），都支持e.x属性,
     其值为“相对可视区域的坐标”——没错，对它们来说，e.x == e.clientX。用题主的话说就是“没有计算滚动条”。

     再来看看e.x属性的发明者IE。IE全系列支持e.x
     被点击对象所在的坐标系（即最近一个指定position: relative的tag的左上角的border外边界为原点）的坐标位置。
     如果自身及上层均没有指定position: relative属性，则蜕变为相对于“相对可视区域的坐标”。

     题外话，通过F12发现，IE一旦涉及滚动条后计算居然不是整像素数，而是会出现误差小数的！*/
</script>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <met