Chúng ta nên thay thế gì cho layerX/layerY vì chúng không được chấp nhận trong webkit?

Question

Trong chrome canary, layerX và layerY không được dùng nữa, nhưng chúng ta nên sử dụng cái gì?

Tôi đã tìm thấy offsetX nhưng nó không hoạt động với Firefox. Vì vậy, để có được layerX mà không cảnh báo trên webkit, tôi đã thực hiện điều đó:

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

Nhưng điều này có vẻ khá phức tạp! Đó có thực sự là những gì chúng ta nên làm để làm cho layerX hoạt động trên tất cả các trình duyệt không?

Answer 1

Đây là một chức năng để tính toán layerX và layerY từ một sự kiện click:

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 }; 
} 

Cảm ơn rất nhiều tới Stu Cox để chỉ ra hai chức năng sử dụng để làm thế này.

Answer 2

duy nhất hợp lý cách qua trình duyệt để phát hiện vị trí chuột là clientX/clientX (liên quan đến cửa sổ), screenX/screenY (liên quan đến toàn bộ màn hình) và pageX/pageY (liên quan đến tài liệu, nhưng không được hỗ trợ trong IE8 và dưới).

Quirksmode gợi ý này để tiêu chuẩn hóa đến một giá trị tương đối-to-tài liệu:

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 
} 

Sau đó, bạn có thể sử dụng this làm việc ra vị trí tương đối của nó đến yếu tố của bạn.

Tôi biết, nhưng internet là một nơi kinh khủng.

Answer 3

Bạn có chắc chắn layerX và layerY không được chấp nhận?

Theo kinh nghiệm của tôi họ vẫn còn ở đó, chủ yếu là vì các thuộc tính có liên quan OffsetX và OffsetY không được thực hiện trong các trình duyệt khác:

Có rất nhiều cuộc thảo luận đang diễn ra tại webkit và mozilla mặc dù:

https://bugs.webkit.org/show_bug.cgi?id=21868 và https://bugzilla.mozilla.org/show_bug.cgi?id=674292 Tóm lại, cả hai đều không xác định được liệu có nên xóa nó hay không, vì vậy hiện tại họ không xóa nó.

sau đó các phiên bản IE cung cấp bí danh ánh xạ tới thuộc tính x và y (tôi không được phép đăng thêm bất kỳ liên kết nào do ngăn xếp tràn, vì thiếu 'danh tiếng').