javascript - Detect mouse cursor type - Stack Overflow

admin管理员组

文章数量:1208155

I want JavaScript code to detect the mouse cursor type.

For example when the cursor hovers in <textarea> it changes from default to text.

How would I go about detecting this?

I want JavaScript code to detect the mouse cursor type.

For example when the cursor hovers in <textarea> it changes from default to text.

How would I go about detecting this?

• javascript
• html
• jquery
• css
• mouse-cursor

Share Improve this question Follow edited Jul 19, 2023 at 1:53 Mayank Kumar Chaudhari 18.5k1313 gold badges6767 silver badges151151 bronze badges asked Mar 14, 2011 at 21:18 mkotwdmkotwd 23322 gold badges33 silver badges66 bronze badges 3

• 3 Were you trying to detect the current cursor type, or just set it yourself? If you were trying to set it, there's a host of other questions that are duplicates and this will be closed. (If I were you I'd change the intent of the question so it wants to detect the current cursor type so its not just another duplicate of setting the cursor type, but the choice is completely up to you :) – Gordon Gustafson Commented Mar 14, 2011 at 21:35
• but i don't want to set the type , but get it anywhere in the page .. – mkotwd Commented Mar 14, 2011 at 21:42
• 1 Tell us why you want to do this. My guess is that there's an easier path to your solution. FWIW, the cursor isn't part of the DOM, so you're not going to be able to get much info from it. About the best you can do is figure out it's position and make assumptions from that. – DA. Commented Mar 16, 2011 at 3:36

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 4

You could do this, but its not pretty, and will probably be quite slow depending on how many elements you have on your page.

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

    //do what you want here, i.e.
    console.log( currentCursor );
});

You can detect the cursor type using JavaScript

like

<input id="sample_text" name="one" type="text" value="Sample Text" />

and the JavaScript code should look something like this

$('input[id=sample_text]').click( function() {
   alert("test");   
   var ctl = document.getElementById('sample_text');
   var startPos = ctl.selectionStart;
   var endPos = ctl.selectionEnd;
   alert(startPos + ", " + endPos);
});

you can also look at this Jsfiddle for Js Cursor Detection

the above is the Jquery code written , you can also use the Vanilla JS for that you just need to change it to

<input id="sample_text" name="one" type="text" value="Sample Text" onclick="detect_cursor()" />

and the JavaScript should look something like this

function detect_cursor() {
   alert("test");   
   var ctl = document.getElementById('sample_text');
   var startPos = ctl.selectionStart;
   var endPos = ctl.selectionEnd;
   alert(startPos + ", " + endPos);
};

I have a nice jQuery Extension perfect for this type of thing at this gist:

https://gist.github.com/2206057

To use it just do something like:

$("#eleID").cursor(); // will return current cursor state for that element
$("#eleID").cursor("pointer"); // will change ele cursor to whatever is ""
$("#eleID").cursor("clear"); // will change ele cursor to default
$("#eleID").cursor("ishover"); // will return boolean of if mouse is over element or not
$("#eleID").cursor("position"); // will return cursor's current position in "relation" to element

also

$.cursor("wait") // will change document cursor to whatever is ""
$.cursor($("#eleID"), "wait"); // same as $("#eleID").cursor("wait");
$.cursor("position") // will return current cursor position

should also mention, if you submit multiple elements like $("#eleID1, .elementsWiththisClass") for "position" and "isHover" then it will return an Array containing objects like:

var poses = $("#eleID1, .elementsWiththisClass").cursor("position") //  will equal
poses[0] = {
    ele: e.fn.e.init[1], // the jquery element
    x: XXX, //  where XXX is the cursors current position in relation to element
    y: XXX
}
poses[1] = { // ...and so on and so forth for each element

As suggested here, using getComputedStyle worked for me.

const onMouseOver = function (e) {
      var cursor = getComputedStyle(e.target).cursor;
      console.log({ cursor });
    };
document.addEventListener("mouseover", onMouseOver, false);

Although this does not help detect the exact cursor type when cursor is set to auto, we can at least use it when cursor is set to something other than auto.

I think you can read the cursor css property just like you can set it, but you have to do this from a specific element because AFAIK there's no way to just read the cursor type from the window or document object. Following this logic, to get the current cursor type you would have to find the current element the mouse is over and read its cursor css. However, you'd constantly have to check to see if the cursor changed, which is slow and error prone (As a rule you should almost always try to try to put your code in an event handler to react to something instead of constantly checking if its happened yet and putting your code in that function its more logical, efficient, robust, and clear.)

But the idea of detecting the cursor type still fascinates me, and if anyone knows how I'd love to hear about it. :D

---

As an alternate solution, rather than reading the cursor type, why don't you just set an event handler for when it enters an element that would change it? This would be a lot less error prone and probably more direct, because I don't think you care so much about the cursor, but if the mouse has entered a specific element.

$("#textbox").mouseover( function() { 
    //I know the cursor has changed because it is now in a textbox
});

本文标签： javascriptDetect mouse cursor typeStack Overflow