Detecting mouse cursor type change over element

Question

It is possible to get the current cursor type without predefined cursor style, like when the mouse pass over text, link..

Something like that :

document.addEventListener('mouseover', (e) => {
  console.log(e.'cursorType')
});

I would like to get in the console.log the state of the cursor like : pointer, text, move, wait...

I find some kind of solution in jQuery but I am looking for one in pure vanilla JS

Thank for your answer

Answer 1

Since it may not have been defined inline, you need the computed style:

I use Click here, because it is easier to demo

document.addEventListener('click', e => {
  const tgt = e.target;
  const inline = tgt.style.cursor || "Not defined"
  const computed = window.getComputedStyle(tgt)["cursor"]
  console.log("Inline: ",inline,"Computed: ",computed)
});

.help { cursor: help }

<span style="cursor:pointer">Inline Pointer</span>
<hr>
<span class="help">CSS help</span>

Answer 2

You could get it from the CSS property "cursor" like this:

document.addEventListener('mouseover',function(e){
    var cursor = e.target.style.cursor;
    console.log(cursor);
},false);

Answer 3

Try logging e.target.style.cursor. I think that will give you the cursor type on mouseover of a DOM element.