1
    $('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

Pratik
  • 11
  • 2
  • 2
    No simple way... you need to traverse through DOM and compare positions... You could try `$(event.target).closest('a');` but it's not reliable. – Flash Thunder Mar 17 '17 at 08:47
  • 1
    Assuming by "nearest" you mean based on the x/y position of the mouse, you can use `document.elementFromPoint(x, y);` then increase x/y in a spiral until you hit an anchor. Doubt it would perform well though, but these things often surprise me. – freedomn-m Mar 17 '17 at 08:51
  • In fact comparing positions works pretty fast ... I used it in one project, where I had to find all elements under clickable element... would give a code, but I won't find it... was years ago. – Flash Thunder Mar 17 '17 at 08:53
  • @FlashThunder .closest('body').find('a') I even tried doing that but getting only the first anchor even if i am at the bottom of the page – Pratik Mar 17 '17 at 08:56
  • Thanks for the update @FlashThunder - I didn't want to write the code to see if it was viable - most likely depends on how quickly you increase the spiral and how far away the link is / how large you set the "not-found" limit. – freedomn-m Mar 17 '17 at 08:56
  • @freedomn-m as im new to js im feeling hard to achieve it – Pratik Mar 17 '17 at 09:01

2 Answers2

1

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

First, to see the code in action check the fiddle

Example usage of the code below:

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

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);
}
Luka Kvavilashvili
  • 1,309
  • 10
  • 13
0

you can also try hover instead of mouse move

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