ターゲット要素に対するタッチイベントポイントのx座標を取得する方法は？

Question

は、だから私はこのようになりイメージがあります：私は何をしたいか

var elem = document.getElementById("bt"); 
 
elem.addEventListener("touchstart", handleStart, false); 
 

 
function handleStart(e) { 
 
    e.preventDefault(); 
 
    var touch = e.targetTouches[0]; 
 
    X = touch.pageX; 
 
    Y = touch.pageY; 
 
    return [X, Y]; 
 
}

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/sections-3.jpg" id="bt" width="900" height="600">

を、画像自体にタッチイベントの相対x座標とy座標を取得することです。

Answer 1

あなたは簡単に私がいるのでclickイベントを使用して表示しています私のコード.IN Jqueryを使用していることを達成することができます私はデスクトップを使用していますが、タッチイベントでクリックを置き換えることができます。

FIDDLE

ここではコードです：

$('.clickable').bind('click', function(ev) { 
 
    var $div = $(ev.target); 
 
    var $display = $div.find('.display'); 
 

 
    var offset = $div.offset(); 
 
    var x = ev.clientX - offset.left; 
 
    var y = ev.clientY - offset.top; 
 

 
    $display.text('x: ' + x + ', y: ' + y); 
 
});

.clickable { 
 
    border: 1px solid #333; 
 
    background: #eee; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 15px; 
 
    position: absolute; 
 
} 
 

 
.display { 
 
    display: block; 
 
    height: 16px; 
 
    position: absolute; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    width: 100%; 
 
    top: 50%; 
 
    margin-top: -8px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='clickable'> 
 
    <span class='display'></span> 
 
</div>

Answer 2

絶対に

設定された画像の位置とその開始座標を設定し（ここでIは左コーナーを一番上に設定）

#bt{ 
    position:absolute; 
    left:0px; 
    top:0px; 
} 

は現在座標をタッチ画像ピクセル座標です。利用可能なページサイズとウィンドウサイズとスケールを考慮に入れたい場合があります。

また、あなたが要素を取ることができますが

var rect = elem.getBoundingClientRect(); 
console.log(rect.top, rect.right, rect.bottom, rect.left); 

によって座標その後、touch.x - rect.leftとしてこれらの値を使用することができるなど