Giải pháp trình duyệt chéo để thay thế việc sử dụng event.layerX và event.layerY

Question

Tôi đang cố gắng điều chỉnh một số mã từ một ứng dụng đơn giản sử dụng Raphael để cho phép người dùng vẽ hình tròn và hình chữ nhật trên canvas. (mã gốc tại https://gist.github.com/673186)

Mã gốc sử dụng phiên bản cũ hơn của jQuery và hoạt động tốt. Xem http://jsfiddle.net/GHZSd/

Sử dụng phiên bản cập nhật của jQuery, tuy nhiên, phá vỡ ví dụ. Xem http://jsfiddle.net/GHZSd/1/

Lý do cho điều này là event.layerX và event.layerY không còn được định nghĩa trong phiên bản mới của jQuery. Câu hỏi của tôi là - tôi có thể sử dụng mã nào để thay thế các giá trị đó? Tôi đã thử một vài điều chỉ bằng cách thực hiện một số phép toán (event.originalEvent.layerX/layerX vẫn tồn tại bây giờ vì vậy tôi chỉ đang cố thêm/bớt một số thứ sẽ dẫn đến các giá trị đó) nhưng cho đến nay trình duyệt không hoạt động trên tất cả chúng.

Xin lỗi nếu điều này đã được hỏi trước nhưng tôi không thể tìm thấy câu trả lời cụ thể về SO hoặc bất kỳ nơi nào khác.

Answer 1

Vì vậy, tôi đã suy nghĩ một chút về vấn đề này, vì nhóm Chrome muốn xóa layerX và layerY vì những lý do lạ.

Đầu tiên, chúng ta cần vị trí của container của bạn:

var position = $paper.offset(); 

(cho những người đọc mà không fiddle mở, $ giấy là div nơi svg sẽ được rút ra)

Nó cung cấp cho chúng ta hai coords, position.top và position.left, vì vậy chúng tôi biết vị trí trong trang là vùng chứa.

Sau đó, khi nhấp, chúng tôi sử dụng e.pageX và e.pageY, là các hợp đồng của trang. Để thi đua layerX và layerY, chúng tôi sử dụng (e.pageX - position.left) và (e.pageY - position.top)

Et thì đấy: http://jsfiddle.net/GHZSd/30/

Hoạt động trên Chrome, Safari, FF và Opera.