Javascript在touchmove事件上改变div bg的颜色

Question

我有一个 5*5 的网格，我想做的是模仿绘图 Action ，而不是当我按下(用我的手指，它应该是一个移动应用程序)一个正方形时，它会改变其背景颜色。 这部分我已经成功完成并且效果很好。

我现在想做的是，当我在屏幕上移动手指时，它会改变我手指按下(进入其表面)的每个方 block 的颜色，就像绘图一样。

我知道有一个 touchenter 事件，但我不明白如何使用它 我读了一些教程和文章，到处都说 touchenter 事件不冒泡...

如何获取我所触摸的元素的 id？

https://jsfiddle.net/uLfm5szz/2/

任何帮助都会非常有用!

html

<div id="demo"></div>

CSS

.b{
    width: 50px; 
    height: 50px; 
    display: inline-block;
    border: red 1px solid;
}

js

createLoop();
$('.b').bind('touchmove',StartDragSelect);

function createLoop(){
    var length = 30;
    var text = "";
    var demo = $("#demo")
    for (i = 0; i < length; i++) {
     var rowElement = $('<div class="a"></div>');
     demo.append(rowElement);
        for(var x = 0; x < length; x++){
            createGridItem(rowElement,i,x);
        }
    }
}

function createGridItem(rootElement, i, x){
    var pix = 10;
    var currItem = $('<div class="b" id="a'+i+x+'" style="top:' + i*pix +'px; left: ' + x*pix +'px;  background-position-x: -' + x*pix +'px ; background-position-y:-' + i*pix +'px";"></div>');
    $(rootElement).append(currItem);
}

function StartDragSelect(obj)
{
    obj = obj.currentTarget;
    $(obj).css({"background-color":"blue"});    
}

Answer 1

how can i check if i am above the element? which parameter should i use to check it?

这是一个获取元素位置的函数(一个 gridview 单元格)。通过 x 和 y 坐标，您可以将高度和宽度添加到它们中，以计算当前触摸位置是否位于元素上方。

function getPosition(element) {
    var xPosition = 0;
    var yPosition = 0;
    while (element) {
       xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
       yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
       element = element.offsetParent;
    }
    return { x: xPosition, y: yPosition };
}

要使用此功能，您可以这样做

  var y = getPosition(document.getElementById('cell1')).y;
  var x = getPosition(document.getElementById('cell1')).x;