获取所选文本位置但获取位置对于mozilla和chrome浏览器是不同的

Question

我正在获取所选的文本位置值，但chrome和Mozilla的值会有所不同。该怎么做才能使浏览器获得相同的位置值？

＆＃13;

＆＃13;

$( "#canvas-line").mouseup(function(ev) {
     mouseZ1 = ev.clientX;

      console.log('bottom = ' + mouseZ1);
    mouseA1 = ev.clientY;

    console.log("Right = " + mouseA1);
    document.getElementById("CanvasDown").value=mouseZ1;
    document.getElementById("CanvasRight").value=mouseA1;

 })

 .mousedown(function(ev) {
            mouseZ1 = ev.clientX;

             console.log('canvasLeft = ' + mouseZ1);
            mouseA1 = ev.clientY;
            console.log('Top = ' + mouseA1);

            document.getElementById("CanvasLeft").value=mouseZ1;
            document.getElementById("CanvasUp").value=mouseA1;
});

＆＃13;

::selection {
    background: yellow; }

::-moz-selection {
   background: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label>Left<input id="CanvasLeft"></label>
  <label>Top<input id="CanvasUp"></label>
  <label>Right<input id="CanvasRight"></label>
  <label>Bottom<input id="CanvasDown"></label>
</div>

<div id="canvas-line">
The jury trial is one of the handful of democratic and we want to check the coordinate for all this items 
The jury trial is one of the handful of democratic and we want to check the coordinate for all this items S
The jury trial is one of the handful of democratic and we want to check the coordinate for all this items </div>

<div style="height:300px">
<!-- Just a dummy div to make the example area taller so
  the console calls don't cover the area right away -->
</div>

＆＃13;

＆＃13;

＆＃13;