JSでマウスホバー位置を明示する方法

Question

###実現したいこと
.box範囲内で、マウスホバー位置に●を置きたいです。

###発生している問題
下図のように●がハミ出てしまうことがあります。
それも必ずではなく、１０回に１回程度の再現率です。

下図のSample

###ソースコード
こちらがコードになりまして、改善点をご教授願えませんでしょうか。

<div class="box">
  <span></span>
</div>

<div>
  X軸<input type="text" id="x"><br>
  Y軸<input type="text" id="y"><br>
</div>

.box {
    background: gray;
    height: 100px;
    width: 200px;
    position: relative;
}
.box > span {
    display: block;
    width: 10px;
    height: 10px;
    background: black;
    position: absolute;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    border-radius: 50%;
}

$(document).on('mousemove','.box',function(e){

  const ua = window.navigator.userAgent.toLowerCase();
  const area = $(this).offset();
  let x,y;

  if (ua.indexOf('chrome') !== -1 || ua.indexOf('opera') !== -1) {
    //ChromeとOperaはwhichで判定
    if (e.which === 1) {
      y = ( (event.clientY) - (area.top) );
      x = ( (event.clientX) - (area.left) );
    }
  }
  else if (ua.indexOf('firefox') !== -1) {
    //Firefoxはbuttonsで判定
    if (e.buttons === 1) {
      y = ( (event.clientY) - (area.top) );
      x = ( (event.clientX) - (area.left) );
    }
  }
  else if (ua.indexOf("msie") !== -1) {
    //IEはbuttonで判定
    if (e.button === 1) {
      y = ( (event.clientY) - (area.top) );
      x = ( (event.clientX) - (area.left) );
    }
  }
  
  $('#x').val(x);
  $('#y').val(y);
  $('.box > span').css('left',x);
  $('.box > span').css('top',y);
});

お聞きしたいのは上のjQueryかCSSでして、どこを直したらきちんと.box内に収めることができるでしょうか？

###図２
頂いたご回答を参考に、下記リンクのように移動の限界値を「x_max」「y_max」と定めました。
https://jsfiddle.net/mhyt1bc0/

そして、まるぽちの中心にポインターの先端を置くべく➃➄という変更を加えたのですが、下図のようにまたもやハミ出るようになってしまいました。

一晩取り組んでもできず、たびたび申し訳ございませんが教えて頂けましたら幸いです。

Answer 1

こんな感じですかね？

$(function(){
  $(document).on('mousemove','.box',function(e){
    const area = $(this).offset();
    var x = ( (event.clientX) - (area.left) );
    var x_max=$(this).width()-$(this).find('span').width();
    if (x>=x_max) x=x_max;
    var y = ( (event.clientY) - (area.top) );
    var y_max=$(this).height()-$(this).find('span').height();
    if (y>=y_max) y=y_max;
    $('#x').val(x);
    $('#y').val(y);
    $('.box > span').css('left',x);
    $('.box > span').css('top',y);
  });
});

Comments

[kamekamekame]

どうもありがとうございます。maxを追加しなければならないのですね。

その後、下記30行目に頂いたコードを追加し、➀➁➂➃➄を変更してみました。
https://jsfiddle.net/mhyt1bc0/

このうち➀➁➂は質問にあるから問題ない変更だと思うのですが、➃➄がわかりません。
この➃➄ですが、ポインターの先端にまるぽちの中心を置くための計算です。

しかし、この➃➄があると、やはりハミ出るようになってしまいます。
そのハミ出っぷりは、質問に図２として追加させて頂きました。

もしお時間ございましたらまたご回答いただけましたら幸いです。
よろしくお願い致します。