javascript - Detecting mouse cursor type change in a webpage - Stack Overflow

admin管理员组

文章数量:1278952

Is there any event which is triggered when the mouse cursor changes as it hovers over different page elements ?

Ideally an event like this:

window.onmousecursorchange = function(e) {
    // e would contain information about the cursor
    // eg. e.type could contain 'text','pointer', etc..
}

Note: The solution should not involve jQuery or other libraries

Update:

The 'possible duplicate' question is tagged with jQuery infact all the answers (none of which solve the problem) are based on jQuery. I am looking for a pure JavaScript solution. If the moderators believe this is not enough reason to keep this question open feel free to close.

Is there any event which is triggered when the mouse cursor changes as it hovers over different page elements ?

Ideally an event like this:

window.onmousecursorchange = function(e) {
    // e would contain information about the cursor
    // eg. e.type could contain 'text','pointer', etc..
}

Note: The solution should not involve jQuery or other libraries

Update:

The 'possible duplicate' question is tagged with jQuery infact all the answers (none of which solve the problem) are based on jQuery. I am looking for a pure JavaScript solution. If the moderators believe this is not enough reason to keep this question open feel free to close.

• javascript
• html
• node.js
• dom-events

Share Improve this question Follow edited Feb 3, 2023 at 3:47 Mayank Kumar Chaudhari 18.7k1313 gold badges6767 silver badges153153 bronze badges asked Jan 26, 2013 at 17:02 lostsourcelostsource 21.8k99 gold badges7070 silver badges8989 bronze badges 1

• 2 See detect cursor type – Antony Commented Jan 26, 2013 at 17:09

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

You can try this:

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

It uses event bubbling to increase performance and save code.

Yes with event onmouseenter

$('*').mouseenter(function(){
    var currentCursor = $(this).css('cursor') ;
    console.log( currentCursor );
});

$(function(){

    $('*').hover(function(){
        $(this).data('hover',1); //store in that element that the mouse is over it
    },

    function(){
        $(this).data('hover',0); //store in that element that the mouse is no longer over it
    });

    window.isHovering = function (selector) {
        return $(selector).data('hover')?true:false; //check element for hover property
    }
});

@Lickson's solution here works only for inline styles. Not for cursor defined in css files. Thus, you need to getComputedStyle

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

本文标签： javascriptDetecting mouse cursor type change in a webpageStack Overflow