Point over element in jquery

I have textarea over a div. In the div, I highlight some parts of the text entered in the text box. I am trying to hover over events, but I cannot, because they are under my text box. I thought, if possible, using mousemove events on textarea to track the coordinates of the mouse, but then I decided that it would not do me any good, since I could not determine the exact borders if the highlighting covered.

my html setup

So the question is how to simulate mouseover and mouseout events for elements that do not receive them, because they are under other elements?

EDIT:

I ended up a workaround for this, based on Marcus's answer. Full code for mouseover / mouseout events:

var mouseDown = false; var mouseIsOver = false; var lastOverElem = false; textarea.mousemove(function(e) { if (!mouseDown) { textarea.hide(); var elm = $(document.elementFromPoint(e.pageX, e.pageY)); textarea.show(); if (elm.hasClass("highlighted")) { /* MOUSE MOVE EVENT */ if (!mouseIsOver) { mouseIsOver = true; /* MOUSE OVER EVENT */ } } else { if (mouseIsOver) { mouseIsOver = false; if (lastOverElem) { /* MOUSE OUT EVENT */ } } } } }); $('body').mousedown (function () {mouseDown = true;}); $('body').mouseup (function () {mouseDown = false;}); 
+4
source share
1 answer

You can use document.elementFromPoint . Obviously, this does not work if textarea is in front of the main selection container, but there is an application for this. You just need to temporarily hide textarea before calling document.elementFromPoint and then show it right away.

 var textarea = $("#linksTextarea"); textarea.on("mousemove", function(e) { // Temporarily hide the textarea textarea.hide(); // Get element under the cursor var elm = $(document.elementFromPoint(e.pageX, e.pageY)); // Show the textarea again textarea.show(); if (elm.hasClass("highlighted")) { console.log("You're mouse is over highlighted text"); } }); 

Since the DOM is updated in real time, and its rendering is delayed until all your JavaScript is executed, you do not need to worry about any visual crashes.

See jsFiddle test case .

+2
source

Source: https://habr.com/ru/post/1488723/


All Articles