確定何時觸摸手勢離開目標元素

我有一些HTML，看起來是這樣的：確定何時觸摸手勢離開目標元素

<div style="width: 50px; height: 50px; background: #f00" class="t"></div> 
<div style="width: 50px; height: 50px; background: #0f0" class="t"></div> 
<div style="width: 50px; height: 50px; background: #00f" class="t"></div> 
<div style="width: 50px; height: 10px;" id="indicator"></div>

我如何編寫JavaScript，這將使#indicator的background顏色不管的#x背景，#y，或#z當手指觸摸x，y和z的矩形？

我可以做

$(".t").on('touchstart', function() { 
    $("#indicator").css('background', $(this).css('backgroundColor')); 
});

這確實改變了顏色，但無法弄清楚如何把顏色回到auto當手指離開div.t的約束。

（我知道touchend，但我希望它儘快恢復到默認的顏色作爲手指已經離開了矩形，不盡快手指拾起。）

來源

2013-06-02 Aaron Yodaiken

你可以嘗試使用touchmove事件。

$(".t").on('touchmove', function(e) { 
    var tx=e.targetTouches[0].pageX, 
     ty=e.targetTouches[0].pageY; 

    if(!SOME_FUNCTION_TO_CHECK_IF_THE_TOUCH_IS_IN_THE_ELEMENT(x,y,e.target)){ 
    //Remove the color 
    } 


});

在三個參數的函數上面的例子是觸摸的x座標，所述觸摸和觸摸元件的e.target y座標。爲了給出「碰撞」功能的基本思路，您可以使用element.getBoundingClientRect()（More info）確定元素的實際位置，寬度和高度。

看一看這個：touch events。

我希望有幫助。

來源

2013-06-02 06:02:51 potato25

確定何時觸摸手勢離開目標元素

回答

相關問題