我們應該使用layerX/layerY替代什麼替代品，因爲它們在Webkit中已棄用？

在鉻金絲雀中，layerX和layerY被棄用，但我們應該使用什麼呢？我們應該使用layerX/layerY替代什麼替代品，因爲它們在Webkit中已棄用？

我找到了offsetX，但它不適用於Firefox。因此，沒有WebKit的警告得到layerX，我做到了這一點：

var x = evt.offsetX || evt.layerX, 
    y = evt.offsetY || evt.layerY;

但這似乎相當複雜的！那真的是我們應該怎麼做才能讓layerX在所有瀏覽器中工作？

來源

2011-12-05 Nicolas BADIA

這裏是從點擊事件計算layerX和layerY功能：

function getOffset(evt) { 
    var el = evt.target, 
     x = 0, 
     y = 0; 

    while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) { 
    x += el.offsetLeft - el.scrollLeft; 
    y += el.offsetTop - el.scrollTop; 
    el = el.offsetParent; 
    } 

    x = evt.clientX - x; 
    y = evt.clientY - y; 

    return { x: x, y: y }; 
}

由於很多斯圖考克斯指出用來做這一個兩個功能。

來源

2012-05-30 12:49:26

對不起，但這似乎沒有得到始終與layerX和layerY相同的值...看起來我們必須繼續尋找解決方案... –

也許函數名稱應該是'getLayerXY' – aztack

只是爲了完成答案，注意'var x = y = 0'，因爲你聲明'y'是全局的。 – fmvilas

唯一合理跨瀏覽器的方法來檢測鼠標位置是clientX/clientX（相對於窗口），screenX/screenY（相對於整個屏幕）和pageX/pageY（相對於記錄，但不是在IE8和下方支撐）。

Quirksmode表明，這種標準化的相對到文檔值：

function doSomething(e) { 
    var posx = 0; 
    var posy = 0; 
    if (!e) var e = window.event; 
    if (e.pageX || e.pageY)  { 
     posx = e.pageX; 
     posy = e.pageY; 
    } 
    else if (e.clientX || e.clientY)  { 
     posx = e.clientX + document.body.scrollLeft 
      + document.documentElement.scrollLeft; 
     posy = e.clientY + document.body.scrollTop 
      + document.documentElement.scrollTop; 
    } 
    // posx and posy contain the mouse position relative to the document 
    // Do something with this information 
}

那麼你可以使用this工作出位置相對其對你的元素。

可怕的我知道，但互聯網是一個可怕的地方。

來源

2012-05-25 19:53:41

你確定layerX和layerY被棄用嗎？

根據我的經驗，他們仍然存在，主要是因爲相關屬性OFFSETX和OFFSETY未在其他瀏覽器中實現：

有很多的討論，在WebKit和Mozilla的事情，但：

https://bugs.webkit.org/show_bug.cgi?id=21868和https://bugzilla.mozilla.org/show_bug.cgi?id=674292 簡而言之，他們都有點不確定是否刪除它，所以現在他們沒有刪除它。

後來的IE版本提供了映射到x和y屬性的別名（由於缺乏'聲譽'，我不允許通過堆棧溢出發佈任何進一步的鏈接）。

來源

2014-05-05 09:47:48 Sanne

我們應該使用layerX/layerY替代什麼替代品，因爲它們在Webkit中已棄用？

回答

相關問題