Click event does not work with custom cursor

user_17194789 0
Viewed 52

I am trying to create a custom cursor on a website (a blurry yellow spot). I created a div in HTML for the custom cursor and styled it in CSS. I gave the 'cursor: none' property to the body tag to hide the default cursor. I also put 'pointer-events: none' on the custom cursor div. Still, click events are not (or hardly) working on buttons (for example I cannot close a pop-up window with the close button). When I remove 'cursor: none', everything works fine, but the default cursor returns beside the yellow spot. Could you please help me in solving this? How could I remove the default cursor without affecting click events? Thank you in advance.

// move yellow spot as cursor
const moveCursor = (e) => {
    const mouseY = e.clientY;
    const mouseX = e.clientX;
    const yellowSpot = document.querySelector(".yellow-spot");
    yellowSpot.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
}

window.addEventListener('mousemove', moveCursor);

document.querySelector("input[type=button]").addEventListener("click", () => {
    console.log("Button clicked");
});
*,
body {
    cursor: none !important;
}

.yellow-spot {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background: #ffeb77;
    box-shadow: 0 0 15px 5px #ffeb77;
    pointer-events: none;
}
<div class="yellow-spot"></div>
<input type="button" value="Click Me">

custom-cursor pointer-events css html javascript
1 Answers

The issue is that the actual cursor is at the top-left of the yellow spot, not in the middle, so it's easy to miss things when trying to click on them. You can see that if you remove the cursor: none rule:

// move yellow spot as cursor
const moveCursor = (e) => {
    const mouseY = e.clientY;
    const mouseX = e.clientX;
    const yellowSpot = document.querySelector(".yellow-spot");
    yellowSpot.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
}

window.addEventListener('mousemove', moveCursor);

document.querySelector("input[type=button]").addEventListener("click", () => {
    console.log("Button clicked");
});
*,
body {
    /* cursor: none !important; */
}

.yellow-spot {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background: #ffeb77;
    box-shadow: 0 0 15px 5px #ffeb77;
    pointer-events: none;
}
<div class="yellow-spot"></div>
<input type="button" value="Click Me">

To fix it, center the yellow spot over the cursor rather than moving it to the top-left (I also changed how the yellow spot is moved, but that's not the important thing):

const yellowSpot = document.querySelector('.yellow-spot');
// move the yellow spot to the mouse position
document.addEventListener('mousemove', function(e) {
    // Make sure the *center* of the yellow spot is where the
    // cursor is, not the top left
    const {clientWidth, clientHeight} = yellowSpot;
    yellowSpot.style.left = ((e.pageX - (clientWidth / 2)) + 'px');
    yellowSpot.style.top = (e.pageY - (clientHeight / 2)) + 'px';
});
*,
body {
    cursor: none !important;
}

.yellow-spot {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background: #ffeb77;
    box-shadow: 0 0 15px 5px #ffeb77;
    pointer-events: none;
}
<div class="yellow-spot"></div>
<button onclick="alert('test')">Click me</button>

Here's a version with the cursor showing so you can see how it's centered in the yellow spot now:

const yellowSpot = document.querySelector('.yellow-spot');
// move the yellow spot to the mouse position
document.addEventListener('mousemove', function(e) {
    // Make sure the *center* of the yellow spot is where the
    // cursor is, not the top left
    const {clientWidth, clientHeight} = yellowSpot;
    yellowSpot.style.left = ((e.pageX - (clientWidth / 2)) + 'px');
    yellowSpot.style.top = (e.pageY - (clientHeight / 2)) + 'px';
});
*,
body {
    /*cursor: none !important;*/
}

.yellow-spot {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background: #ffeb77;
    box-shadow: 0 0 15px 5px #ffeb77;
    pointer-events: none;
}
<div class="yellow-spot"></div>
<button onclick="alert('test')">Click me</button>

user_40001300
Related