truy xuất cùng một offsetX trên cảm ứng như sự kiện chuột

Question

Xin chào Tôi đang cố gắng để có được sự bù đắpX, Y của sự kiện cảm ứng phải giống hệt với offsetX của sự kiện chuột. Để làm như vậy, tôi đã sử dụng mã này:

Tôi thậm chí đã cố gắng mô phỏng sự kiện chạm vào sự kiện chuột nhưng với mục đích đó tôi cần offsetX/Y, không khả dụng trong sự kiện chạm. Có cách nào bù đắpX/Y có thể được tính cho cảm ứng không? Vui lòng giúp

Answer 1

Bạn nên sử dụng clientX/clientY thuộc tính của sự kiện chuột (hoặc pageX/pageY) nếu bạn đã cuộn trên trang của mình.

Đối với giải pháp của bạn. Nó có thể được sửa chữa bằng cách sử dụng getElementById(canvasName).clientX

ev.offsetX = ev.targetTouches[0].pageX - getElementById(canvasName).clientX 

canvasName.offsetLeft được bù đắp của canvasName đối với nó là mẹ với. Vì vậy, nếu bạn muốn sử dụng offsetLeft bạn nên làm một cái gì đó như sau

var left = 0, 
elem = getElementById(canvasName); 

while(elem) { 
    left = left + parseInt(elem.offsetLeft); 
    elem = elem.offsetParent;   
} 

ev.offsetX = ev.targetTouches[0].pageX - left 

Answer 2

tôi sử dụng này

var rect = e.target.getBoundingClientRect(); 
var x = e.targetTouches[0].pageX - rect.left; 
var y = e.targetTouches[0].pageY - rect.top; 

Answer 3

Tôi biết đây là một câu hỏi cũ nhưng là người đầu tiên trong một google của "OffsetX chạm sự kiện" .. Tôi đã kết thúc ở đây chức năng này sau khi nghiên cứu tôi đã làm.

function normalizePosition(evt, parent){ // Simple adoptation 
 
var position = {}; 
 

 
position.x = (evt.targetTouches) ? evt.targetTouches[0].pageX : evt.clientX; 
 
position.y = (evt.targetTouches) ? evt.targetTouches[0].pageY : evt.clientY; 
 

 
while(parent.offsetParent){ 
 
    position.x -= parent.offsetLeft - parent.scrollLeft; 
 
    position.y -= parent.offsetTop - parent.scrollTop; 
 

 
    parent = parent.offsetParent; 
 
} 
 

 
return position; 
 
} 
 

 
function normalizePosition(evt, parent, gridSize, offset){ // With some extra stuffs 
 
var position = {}; 
 

 
position.x = (evt.targetTouches) ? evt.targetTouches[0].pageX : evt.clientX; 
 
position.y = (evt.targetTouches) ? evt.targetTouches[0].pageY : evt.clientY; 
 

 
while(parent.offsetParent){ 
 
    position.x -= parent.offsetLeft - parent.scrollLeft; 
 
    position.y -= parent.offsetTop - parent.scrollTop; 
 

 
    parent = parent.offsetParent; 
 
} 
 

 
if(gridSize){ 
 
    position.x = Math.floor(position.x/gridSize); 
 
    position.y = Math.floor(position.y/gridSize); 
 
} 
 

 

 
if(offset){ 
 
    position.x -= offset.x; 
 
    position.y -= offset.y; 
 
} 
 

 
return position; 
 
}

Answer 4

này đang làm việc cho tôi trên Mobile Safari 10 layerX và layerY thuộc tính cung cấp x tương đối và y, nhưng không đưa vào tài khoản các biến đổi. Vì vậy, tôi đã áp dụng thủ công phép biến đổi bằng cách lấy các giá trị quy mô biến đổi từ css.

e = sự kiện cảm ứng

parent = phần tử cha nơi áp dụng "chuyển đổi". Đối với tôi đó là const parent = $(e.target.parentNode);

const layerX = e.originalEvent.layerX; 
const layerY = e.originalEvent.layerY; 
const currentScaleX = parseFloat(parent.css('transform').match(/-?[\d\.]+/g)[0]); 
const currentScaleY = parseFloat(parent.css('transform').match(/-?[\d\.]+/g)[3]); 
if (currentScaleX < 1){ 
    currentScaleX += 1; 
    } 
    if (currentScaleY < 1){ 
    currentScaleY +=1; 
    } 
const offsetX = layerX * currentScaleX; 
const offsetY = layerY * currentScaleY; 

Để thực hiện hai dòng cuối cùng tương thích với cảm ứng và nhấp vào các sự kiện:

const offsetX = e.offsetX || layerX * currentScaleX; 
const offsetY = e.offsetY || layerY * currentScaleY; 

tham chiếu cho grabbing chuyển đổi các giá trị: Fetch the css value of transform directly using jquery