js event.x,event.clientX,event.offsetX区别

<div style="margin:20px;padding:20px;">
    <span style="border:1px solid #ff0000;" >blog:xiongzhengxiang</span>
    <span style="position:relative;left:50px;border:1px solid #0000ff;">interest:inovation and thinking </span>
</div>

<div style = "position:relative;top:20px;">
    <span style="position:absolute;border:1px solid #000;top:20px;">test</span>
</div>
<script>
     testeventx = function(e){
     alert(e.tagName);
         alert("e.x is "+ e.x);
     alert("e.clientX is " +e.clientX);
     alert("e.offsetX is " +e.offsetX);
     }
     document.addEventListener("click",testeventx);
</script>