如何在鼠标移动时从当前鼠标位置获取最近的锚点 [英] how to get nearest anchor from the current mouse position on mouse move

问题描述

    $('p').on('mousemove',function(event) {
      link = $(event.target).find('a');
      //to find the nearest link and store in the link variable
     console.log(link.html());//to print the link in console
     });

我试过这个，但我只能找到
段落中的第一个链接但是我想找到我鼠标位置附近的链接

I tried this but im only able to find the first link within a paragraph but i want to find the links near to my mouse position

推荐答案

你可以使用 document.elementFromPoint（x，y）;
并创建某种jQuery插件

You can use document.elementFromPoint(x, y); and create some kind of jQuery plugin

首先，要查看操作中的代码，请查看小提琴

First, to see the code in action check the fiddle

以下代码的示例用法：

$("p").nearest("a", 10);

但下面的代码只是检查元素周围的框与提供的距离。如果它没有返回任何元素，你可以进一步使用它并检查元素周围的框，距离为20px，然后是30px，依此类推。取决于您的需求。

But the code below just checks the box around the element with the provided distance. If it doesn't return any elements, you can use it further and check the box around the elements by distance of 20px, then 30px and so on. Depends on your needs.

$.fn.nearest = function(selector, radius) {
    var position = this.offset();

    if (!radius) radius = 10; // pixels

    var positions = [];
    var elements = [];

    // so, move up and left by the value of radius variable (lets say its 10)
    // start from the -10 -10 px corner of the element and move all the way to 
    // +10 +10 coordinats to the right bottom corner of the element
    var startX = position.left - radius;
    var startY = position.top - radius;
    var endX = position.left + this.outerWidth(true) + radius;
    var endY = position.top + this.outerHeight(true) + radius;

    var positions = [];

    // create horizontal lines
    // --------------
    //  your element
    // --------------
    for (var x = startX; x < endX; x++) {
        // creates upper line on the startY coordinate
        positions.push([x, startY]);
        // creates bottom line on the endY coordinate
        positions.push([x, endY]);
    }

    // create the vertical positions
    // |              |
    // | your element |
    // |              |
    for (var y = startY; y < endY; y++) {
        // creates the left line on the startX coordinate
        positions.push([startX, y]);
        // creates the right line on the endX coordinate
        positions.push([endX, y]);
    }

    // so now the positions array contains all the positions around your element with a radius that you provided
    for (var i = 0; i < positions.length; i++) {
        // just loop over the positions, and get every element
        var position = positions[i];
        var x = position[0];
        var y = position[1];

        var element = document.elementFromPoint(x, y);
        // if element matches with selector, save it for the returned array
        if ($(element).is(selector) && elements.indexOf(element) === -1) elements.push(element);
    }

    return $(elements);
}

这篇关于如何在鼠标移动时从当前鼠标位置获取最近的锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！