我希望 JavaScript 代码检测鼠标光标类型。
例如，当光标悬停在<textarea> 时，它会从默认变为文本。
我将如何检测这一点？
【问题讨论】：
标签： javascript jquery css mouse-cursor
您可以使用 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 Cursor Detection
以上是编写的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);
};
【讨论】：
我有一个很好的 jQuery 扩展，非常适合这种类型的事情：
要使用它，只需执行以下操作：
$("#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
【讨论】：
您可以这样做，但它并不漂亮，并且可能会很慢，具体取决于您页面上有多少元素。
$('*').mouseenter(function(){
var currentCursor = $(this).css('cursor') ;
//do what you want here, i.e.
console.log( currentCursor );
});
【讨论】：
我认为您可以像设置它一样读取cursor css 属性，但是您必须从特定元素执行此操作，因为 AFAIK 无法仅从窗口或文档对象读取光标类型。按照这个逻辑，要获取当前光标类型，您必须找到鼠标所在的当前元素并读取其cursor css。但是，您必须经常检查光标是否发生了变化，这很慢并且容易出错（通常，您应该几乎总是尝试将代码放在事件处理程序中以对某些事情做出反应，而不是不断检查是否它发生了，把你的代码放在那个函数中它更合乎逻辑、更有效、更健壮和更清晰。）
但是检测光标类型的想法仍然让我着迷，如果有人知道我很想听到它的话。 :D
作为一种替代解决方案，而不是读取光标类型，为什么不设置一个事件处理程序，用于当它进入一个会改变它的元素时呢？这会更不容易出错，而且可能更直接，因为我认为您不太关心光标，但如果鼠标已进入特定元素。
$("#textbox").mouseover( function() {
//I know the cursor has changed because it is now in a textbox
});
【讨论】：
cursor:text;