检测鼠标光标类型

Question

我想要 JavaScript 代码来检测鼠标光标类型。

例如，当光标悬停在 </code> 中时，它会从默认更改为文本。

我将如何检测这个？

Answer 1

您可以这样做，但它并不漂亮，而且可能会很慢，具体取决于页面上有多少元素。

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

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

Answer 2

来检测光标类型

您可以使用JavaScript

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

，JavaScript 代码应该如下所示，

$('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);
});

您也可以查看此 Jsfiddle for Js 光标检测

上面是编写的 Jquery 代码，您也可以使用 Vanilla JS，只需将其更改为

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

JavaScript 应该如下所示

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

Answer 3

我有一个很好的 jQuery 扩展，非常适合这种类型的事情，要点如下：

https://gist.github.com/2206057

要使用它，只需执行以下操作：

$("#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

还

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

应该提及，如果您为“position”和“isHover”提交多个元素，例如 $("#eleID1, .elementsWiththisClass") ，那么它将返回一个包含以下对象的 Array：

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

Answer 4

正如此处所建议的，使用getCompulatedStyle对我有用。

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

虽然当光标设置为 auto 时，这无助于检测确切的光标类型，但我们至少可以在光标设置为 auto 以外的其他值时使用它。

Answer 5

我认为您可以读取 cursor css 属性，就像您可以设置它一样，但是您必须从特定元素执行此操作，因为据我所知，无法从窗口或文档对象中读取光标类型。按照这个逻辑，要获取当前光标类型，您必须找到鼠标所在的当前元素并读取其 cursor css。但是，您必须不断检查光标是否发生变化，这很慢并且容易出错（通常，您应该总是尝试将代码放入事件处理程序中以对某些内容做出反应，而不是不断检查是否发生变化它已经发生了，将你的代码放入该函数中会更逻辑、更高效、更健壮、更清晰。）

但是检测光标类型的想法仍然让我着迷，如果有人知道我很想听听它。 :D

---

作为替代解决方案，您为什么不直接设置一个事件处理程序，以便在它进入会更改它的元素时，而不是读取光标类型？这会更不容易出错，而且可能更直接，因为我认为您不太关心光标，但如果鼠标已进入特定元素。

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