javascript - 计算鼠标和 DOM 元素边缘之间的距离

Question

我想计算鼠标和给定元素的边缘之间的距离。因此，当鼠标触摸到元素的边缘时，该值应为 0px；

https://codepen.io/nishaljohn/pen/BVmGbz

var mX, mY, distance,
    $distance = $('#distance_text p'),
    $element  = $('.div1');

function calculateDistance(elem, mouseX, mouseY) {
    return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
}

$(document).mousemove(function(e) {  
    mX = e.pageX;
    mY = e.pageY;
    distance = calculateDistance($element, mX, mY);
    $distance.text(distance);         
});

这考虑了元素的中心，只有当您到达绝对中心时才读取 0px。

JQuery 插件也可以。

Answer 1

对于任何大小的元素，我都使用了我在另一个示例中找到的代码:

var mX = e.pageX;
var mY = e.pageY;
var from = {x:mX, y:mY};
var $n=your_Element;
var off = $n.offset(),
  nx1 = off.left,
  ny1 = off.top,
  nx2 = nx1 + $n.outerWidth(),
  ny2 = ny1 + $n.outerHeight(),
  maxX1 = Math.max(mX, nx1),
  minX2 = Math.min(mX, nx2),
  maxY1 = Math.max(mY, ny1),
  minY2 = Math.min(mY, ny2),
  intersectX = minX2 >= maxX1,
  intersectY = minY2 >= maxY1,
  to = {
    x: intersectX ? mX : nx2 < mX ? nx2 : nx1,
    y: intersectY ? mY : ny2 < mY ? ny2 : ny1
  };
var distX = to.x - from.x,
  distY = to.y - from.y,
  hypot = Math.sqrt(distX * distX + distY * distY);
console.log(hypot);//this will output 0 when next to your element.