CODEWITHSUNDEEP
javascripteventscursordom-eventsmouseevent
Arnaud Hrt
Arnaud Hrt

Reputation: 5

Detecting mouse cursor type change over element

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

Upvotes: 0

Views: 2062

Answers (3)

mplungjan
mplungjan

Reputation: 178421

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>

Upvotes: 3

Robert Lin
Robert Lin

Reputation: 434

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

Upvotes: 0

Agustin
Agustin

Reputation: 67

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);

Upvotes: 0

Related Questions