自定義光標在瀏覽器窗口之外

我的網站上有一個可自由調整大小的元素。這由邊上的4個手柄完成。在懸停這些手柄並調整元素大小時，我想顯示相應的調整大小箭頭。自定義光標在瀏覽器窗口之外

當前我通過將body/root的css光標樣式設置爲這些箭頭來實現此行爲。關於它的問題是瀏覽器窗口的客戶區域的限制。如果在按住鼠標的同時在任何地方都可以看到箭頭光標，它將在視覺上更加一致並且更少混淆。

Google地圖在移動地圖時用他們的手形光標做同樣的事情。所以我的問題是如何實現我自己的這個效果。

我現在的（相關）來源：

function startObjectScaling(e){ 
    e.stopPropagation(); 
    e.preventDefault(); 
    document.documentElement.style.cursor = this.style.cursor; 
    window.addEventListener("mouseup", stopObjectScaling, false); 
} 

function stopObjectScaling(e){ 
    e.stopPropagation(); 
    document.documentElement.style.cursor = ''; 
    window.removeEventListener("mouseup", stopObjectScaling); 
} 

[...] 

var tg = document.getElementById("transformGadget"); 
var handle = tg.firstChild.nextSibling; 
for(var i=0;i<4;i++){ 
    handle.addEventListener("mousedown", startObjectScaling, false); 
    handle = handle.nextSibling; 
}

來源

2010-11-01 V02460

什麼碼/標記你有現在？ – alex 2010-11-01 23:19:16

對於我在Chromium上的Google地圖遊標，如果我不經過頁面的任何其他部分而跳出窗口，則只能保持一個手形;否則，它恢復到正常光標。我認爲這意味着，不幸的是，您可能無法100％解決您的問題。 – 2010-11-01 23:25:08

我在Firefox和Chrome中測試過它，它工作得很好 - 它比我現在的解決方案好或多。 – V02460 2010-11-02 00:20:19

爲此目的，在更現代的瀏覽器中實現了一個特殊功能。名字是setCapture()。它將所有鼠標輸入重定向到該方法被調用的對象。現在一個簡單的css 光標該元素的定義就足以存檔所需的效果。鼠標釋放後，此效果停止（爲了確保安全）。它也可以通過調用手動停止releaseCapture

例如：

<style type="text/css"> 
#testObj { 
    /* this cursor will also stay outside the window. 
     could be set by the script at the mousedown event as well */ 
    cursor: hand; 
} 
</style>

[...]

document.getElementById('testObj').onmousedown = function(e){ 

    // these 2 might be useful in this context as well 
    //e.stopPropagation(); 
    //e.preventDefault(); 

    // here is the magic 
    e.target.setCapture(); 
}

來源

2011-01-04 22:42:07 V02460

我很高興你找到了問題的答案。感謝您更新網頁。 – jcolebrand 2011-01-05 00:32:21

自1995年以來的IE FTW！ – 2011-01-05 02:25:43

-1

如果箭頭光標會到處可見當鼠標按住。

您正在依靠潛在的操作系統怪癖來創建您的行爲。這不是你可以假設總是成立的東西。但是，一旦啓動了mousedown，無論您將鼠標移動到何處，該點上的光標通常都會保持不變，直到出現其他事件（您可能會將鼠標移到另一個窗口上？系統中斷？）更改光標。

換句話說，不要依賴這種行爲。找到其他能爲你工作的東西。如果您必須這樣做，請重新檢查您的業務需求。

來源

2010-11-03 16:30:55 jcolebrand

這是一個瘋狂的猜測，我沒有找到任何有關它的信息與快速搜索，但我認爲這不是操作系統的怪癖，而是瀏覽器供應商（是的，它們都是一致的）實現的行爲 - 就像按住鼠標左鍵時鼠標在客戶區之外協調更新一樣，但不是右鍵。他們這樣做是爲了使這些應用程序正常工作。 – V02460 2010-11-11 09:40:38

我仍然認爲它是一個操作系統怪癖的遊標繪圖帳戶應該由GDI或WM管理。如果我用旋轉鎖把鼠標放在窗戶上，我會看到微調框。我並沒有故意嘗試在任何系統上進行測試，因此如果您構建一個包含Gnome，KDE，Windows，MacOS和Chrome，Firefox，Safari和IE的工作測試平臺，並在每個應用程序中更改光標並拖出即可，無限光標更改和拖出界限無光標更改請務必讓我知道。在此之前，我會繼續理解。 – jcolebrand 2010-11-11 12:56:05

另外我要指出的是，如果所有人都一致，那麼你可能是錯的。瀏覽器供應商甚至無法將元素間距保持100％一致。你期望他們讓鼠標行爲一致嗎？ – jcolebrand 2010-11-11 12:59:25

自定義光標在瀏覽器窗口之外

回答

相關問題