檢測遊標類型

Question

我想要JavaScript代碼來檢測遊標類型。

例如，當光標在textarea的從默認文本更改徘徊..

Answer 1

我想你可以閱讀，就像你可以設置它的cursor CSS屬性，但你必須從一個特定的元素做到這一點因爲AFAIK無法從窗口或文檔對象中讀取光標類型。按照這個邏輯，爲了獲得當前的遊標類型，你必須找到鼠標所在的當前元素，並讀取它的cs。然而，你必須經常檢查光標是否改變，這是緩慢且容易出錯的（通常，你應該總是嘗試將你的代碼放入事件處理程序來對事物作出反應，而不是經常檢查它發生了，並把你的代碼在這個功能更邏輯，高效，健壯，清晰。）

但檢測遊標類型的想法仍然迷住了我，如果有人知道我怎麼會喜歡聽到它。 ：d

---

作爲一個替代的解決方案，而不是讀遊標類型，你爲什麼不只是設置，當它進入，將改變它的元素的事件處理程序？這將會減少很多錯誤，並且可能更直接，因爲我不認爲你對光標太在意，但是如果鼠標輸入了特定的元素。

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

Answer 2

你能做到這一點，但它不是漂亮，而且很可能會很慢取決於你有多少個元素有你的頁面上。

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

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

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 

還應該提到，如果您提交多個元素，如$("#eleID1, .elementsWiththisClass")的「位置」和「isHover」，那麼它將返回就像一個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

您可以檢測使用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代碼寫的，你也可以用香草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); 
};