Reputation: 5
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
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
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
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