计算鼠标与DOM元素边缘之间的距离

Question

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

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插件也可以。

- Perera John

---

给定的代码有没有任何问题？ - Nico Haase

如果您查看示例，您会发现它仅在到达元素的绝对中心时返回距离为0，我希望它在鼠标接触元素并且鼠标在元素内部时读取0。 - Perera John

我认为这只是数学问题...将对象的高度和宽度相加，计算它们的距离并在calculateDistance中添加它们。这并不难... - user9757842

@Cristian，抱歉，我不太明白你的意思，你能否展示一下你提出的解决方案的编辑版？ - Perera John

@PereraJohn 好的，我会回答。 - user9757842

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.

- Perera John

---

我进行了测试，它运行得非常好，以下是一些示例：https://jsfiddle.net/Byte/L9hv4pcr（jQuery），https://jsfiddle.net/Byte/L5nzt7af（Vanilla JS）。 - KevynTD

你应该链接到你获取这段代码的地方。 - Zach Saucier

Answer 2

好的，解决方案只涉及到纯数学。它只涉及到减去容器的宽度和高度 - elem.width()/2 和 - elem.height()/2

(function() {
    
    var mX, mY, distance,
        $distance = $('#distance span'),
        $element  = $('#element');

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

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

})();

body {
    font: 11px helvetica, arial, sans-serif;
    text-align: center;    
}

#distance {
    font-size: 16px;
    font-weight: bold; 
    margin-top: 10px; 
}

#element {
    background: #000;
    color: #fff;
    height: 50px;
    left: 50%;
    margin: -25px 0 0 -25px;
    position: absolute;
    top: 50%;
    width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Move your mouse to calculate distance between the center of the element and the mouse cursor.</p>

<p id="distance">Distance: <span>0</span>px</p>

<div id="element"></div>

这是解决方案吗？

- user9757842

---

你的解决方案确实有效，但它只适用于完全平方数。我测试了一个矩形，它只对高度起作用。当在边缘时，宽度仍然大于0。 - Perera John

我找到的一个解决方案是使用这个库：http://gilmoreorless.github.io/jquery-dom-line/它可以从鼠标到元素边缘绘制一条线，你可以将线条设置为不可见，并使用jQuery获取元素的宽度。虽然这肯定不是最好的解决方案，但它能够工作。 - Perera John

还有，您可以应用数学来解决任何形状的问题。你的解决方案要好得多。 - user9757842

你应该为这个函数给予Chris Coyier信用。未经授权使用代码是不好的行为。 - Zach Saucier

这只计算到元素中心的距离，这不是 OP 所要求的。 - Zach Saucier