如何從當前鼠標位置獲得最近的錨鼠標移動

$('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 
    });

我試過，但我只是能夠找到一個段落中的第一個鏈接，但我想找到接近我的鼠標位置如何從當前鼠標位置獲得最近的錨鼠標移動

來源

2017-03-17 Pratik

沒有簡單的方法......你需要通過DOM遍歷和比較的位置......你可以嘗試'$（event.target） .closest（'a'）;'但它不可靠。 –

假設「最接近」是基於鼠標的x/y位置，您可以使用'document.elementFromPoint（x，y）;'然後以螺旋形式增加x/y，直到您點擊一個錨點。懷疑它會表現良好，但這些事情經常令我感到驚訝。 –

事實上，比較職位的工作速度非常快......我在一個項目中使用它，在那裏我必須找到可點擊元素下的所有元素......會給出一個代碼，但我不會找到它...是在幾年前。 –

鏈接

您可以使用document.elementFromPoint(x, y); 創造某種jQuery插件的

首先，在行動中看到的代碼檢查下面的代碼fiddle

用法示例：

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

但下面的代碼只是檢查提供的距離元素周圍的框。如果它沒有返回任何元素，您可以進一步使用它，並檢查元素周圍的距離20px，然後30px等等。取決於你的需求。

$.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); 
}

來源

2017-03-17 09:41:47

你也可以嘗試懸停，而不是鼠標移動

<p class="demo1"> 
some examples some examples <a href="https://jsfiddle.net/">anchor1</a> some examples some examples <a href="">anchor1</a>some examples some examples some examples some examples <a href="">anchor1</a>some examples some examples 
</p> 
<div id="demo2">hi</div> 
$('.demo2 a').hover(function (event) { 
    link = $(event.target); 
    //to find the nearest link and store in the link variable 
    $("#demo2").text(link); 
     });

來源

2017-03-17 10:19:18 user7267363

如何從當前鼠標位置獲得最近的錨鼠標移動

回答

相關問題