JSFiddle - React, Tailwind, and code Playground

HTML

<div id="father" style="border:0 solid red;width:200px;">
    <div id="a" style="background:red;width:100px;height:100px">长,宽都是100px</div>
    <div id="b" style="border-top:0 solid red;background:yellow;width:500px;height:1500px;margin-left:100px;">宽500px，高1500px</div>
</div>
<table>
    <tr>
        <td>pageX:<span id="pageX"></span></td>
        <td>clientX:<span id="clientX"></span></td>
        <td>scrollLeft:<span id="scrollLeft"></span></td>
        <td>screenX:<span id="screenX"></span></td>
        <td>offsetX:<span id="offsetX"></span></td>
        <td>layerX:<span id="layerX"></span></td>
    </tr>
    <tr>
        <td>pageY:<span id="pageY"></span></td>
        <td>clientY:<span id="clientY"></span></td>
        <td>scrollTop:<span id="scrollTop"></span></td>
        <td>screenY:<span id="screenY"></span></td>
        <td>offsetY:<span id="offsetY"></span></td>
        <td>layerY:<span id="layerY"></span></td>
    </tr>
</table>
<br/>
<br/>
	<pre>

offsetX/offsetY：W3C- IE+ Firefox- Opera+ Safari+ chrome+

x/y：W3C- IE+ Firefox- Opera+ Safari+ chrome+

layerX/layerY：W3C- IE- Firefox+ Opera- Safari+ chrome+

pageX/pageY：W3C- IE- Firefox+ Opera+ Safari+ chrome+

clientX/clientY：W3C+ IE+ Firefox+ Opera+ Safari+ chrome+

screenX/screenY：W3C+ IE+ Firefox+ Opera+ Safari+ chrome+

	</pre>

CSS

*{margin:0;padding:0}
        span{padding-right:10px;}
        body{
            height: 1800px;
        }

JavaScript

var $=function(id){
        return ("string"==typeof id) ? document.getElementById(id):id;
    };
    function text(e){

        e=e||window.event;

        //IE

        var doc=document.documentElement;

        //chrome

        var body = document.body;

        $("pageX").innerHTML=e.pageX;

        $("pageY").innerHTML=e.pageY;

        $("clientX").innerHTML=e.clientX;

        $("clientY").innerHTML=e.clientY;

        $("screenX").innerHTML=e.screenY;

        $("screenY").innerHTML=e.screenY;

        $("scrollTop").innerHTML=doc && doc.scrollTop;

        $("scrollLeft").innerHTML=doc && doc.scrollLeft;

        $("offsetX").innerHTML=e.offsetX;

        $("offsetY").innerHTML=e.offsetY;

        $("layerX").innerHTML=e.layerX;

        $("layerY").innerHTML=e.layerY;

    }
    $("a").onmousemove=function(e){ text(e);}

    $("b").onmousemove=function(e){ text(e);}