Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

159
Vistas
Javascript check if cursor is touching an element on the page that follows a specific list of element tags. (No JQuery. Vanilla JS Only)

So I am implementing a little circle around you cursor that expands when your mouse touches a button, an a, and an image. I have a lot of code to make this work, and I am not going to make you go through all of it. The gist is, i have a function: checkIfTouching. Here is the code (messy but idc):


function findTopLeft(element) {
    var rec = element.getBoundingClientRect();
    return {top: rec.top + window.scrollY, left: rec.left + window.scrollX};
} //call it like findTopLeft('#header');

function getElementBBox(element) {
    var rec = element.getBoundingClientRect();
    return {width: rec.width, height: rec.height};
}

function checkIfTouching(element, x, y) {
    // check if the cursor is in the elementm (from top left to bottom right)
    const elementBBox = getElementBBox(element);
    const elementTopLeft = findTopLeft(element);
    const elementBottomRight = {top: elementTopLeft.top + elementBBox.height, left: elementTopLeft.left + elementBBox.width};

    // check if it is near the cursor
    const cursorDistances = {
        top: Math.abs(elementTopLeft.top - y),
        left: Math.abs(elementTopLeft.left - x),
        bottom: Math.abs(elementBottomRight.top - y),
        right: Math.abs(elementBottomRight.left - x)
    };

    // if the cursor is within 100px of the element, return true
    if (cursorDistances.top < 100 && cursorDistances.left < 100 && cursorDistances.bottom < 100 && cursorDistances.right < 100) {
        if (x >= elementTopLeft.left && x <= elementBottomRight.left && y >= elementTopLeft.top && y <= elementBottomRight.top) {
            return true;
        } else {
            return false;
        }
    } else {
        return false;
    }



}

It works perfectly. The issue I'm having is I get all elements on the page, filer them out, and then I loop through each one using a for loop. This stops the circle from expanding fully because I am hovered over one object, and it has to switch between both. My question is: Is there a way to run a function on all items in a list, or make the for loop run faster. You can see my entire cursor.js file here: https://gist.github.com/BlueFalconHD/eb8a246035e317bfc5d3b0a210b71b6c. I really do not understand this enough, and have no idea half of what this code does honestly. It was written by copilot. Anyway, thanks for the help! :)

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda