How to prevent anchor tag from changing cursor to pointer? – Html

let prevDom = null;

document.addEventListener("click", function(e) {
  e.preventDefault();
}, false);

document.body.style.cursor = "default !important";

document.addEventListener("mousemove", function(e) {
  e.target.style.pointerEvents = "none";
  if (prevDom !== null) {
    prevDom.style.pointerEvents = "";
  }
  prevDom = e.target;
}, false);

<a href="/">click me!!!!</a>
<br/>
<br/>
<a href="/">no click me!!!!</a>
<br/>
<br/>
<a href="/">hahaha</a>

I’m making an extension that allows the user to highlight DOM elements by hovering on them. When the user is hovering, I want to disable click events and keep the cursor in its default state.
For that, I’ve added in the following code:

document.addEventListener("click", function(e) {
    e.preventDefault();
}, false);

document.body.style.cursor = "default !important";

While this snippet prevents any click events from firing, it doesn’t prevent the cursor from changing to pointer when hovering on anchor tags. I tried to simply disable pointer events when hovering on an element via an event listener for mousemove, but the issue here is that it flickers between the two states. Like, you see the pointer for a fraction of a second, before it switches to default. This really hampers the UX, so I was wondering if there’s a way to prevent the cursor from changing to pointer.

Click here to see an example