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

Question

我有一个5 * 5的网格，我想做的是模仿绘画动作，而不是在正方形上按下（用手指，假设它是移动应用程序）改变背景颜色。 这部分我已经设法做，并且工作正常。

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

我知道有一个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

看看https://api.jquerymobile.com/swipe/

这是用于执行此操作的jQuery库。

Answer 2

如何检查我是否高于元素？ 我应该使用哪个参数进行检查？

这是一个获取元素位置的函数（适合您的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;