javascript - jquery通过位置获取元素id并改变他的颜色

Question

我正在尝试编写一个移动网络应用程序。我有几个彼此相邻的方 block ，我希望当用户滑动屏幕时，他的手指按下的所有方 block 都会改变其背景颜色。

我编写了一个脚本，指示用户手指在屏幕中的 x 和 y 位置。

我的问题是:1.如何获取用户手指划过的元素的id？

这是我的代码:

CSS

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

html

<div id="demo"></div>
<h3 id="statusdiv">Status x</h3>
<h3 id="statusdiv1">Status y</h3>

JavaScript

function init() {
    createLoop();
    $('.b').bind('touchstart', StartDragSelect);
    $('.b').bind('touchenter', StartMoveSelect);
    $('.b').bind('touchstart', successA);
};

function createLoop() {
    var length = 5;
    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) {

    var id = obj.currentTarget.id;
    obj = obj.currentTarget;

    console.log(id);
    console.log(obj);

    $(obj).css({
        "background-color": "blue"
    });
}

function StartMoveSelect(obj, x, i) {

    var id = obj.currentTarget.id;
    obj = obj.currentTarget;

    console.log(id);
    console.log(obj);

    $(obj).css({
        "background-color": "blue"
    });
}

function successA() {
    var v1 = document.getElementById('a11');
    if (v1.style.backgroundColor == "blue") {
        alert("Hello! I am an alert box!");
    }
}

/**/

window.addEventListener('load', function () {

    var demo = document.getElementById('demo')
    var statusdiv = document.getElementById('statusdiv')
    var statusdiv1 = document.getElementById('statusdiv1')
    var startx = 0
    var starty = 0
    var distx = 0
    var disty = 0

    demo.addEventListener('touchstart', function (e) {
        var touchobj = e.changedTouches[0] // reference first touch point (ie: first finger)
        startx = parseInt(touchobj.clientX) // get x position of touch point relative to left edge of browser
        starty = parseInt(touchobj.clientY) // get y position of touch point relative to left edge of browser
        statusdiv.innerHTML = 'Status: touchstart<br> ClientX: ' + '-' + startx + 'px'
        statusdiv1.innerHTML = 'Status: touchstart<br> ClientX: ' + starty + 'px'
        e.preventDefault()
    }, false)

    demo.addEventListener('touchmove', function (e) {
        var touchobj = e.changedTouches[0] // reference first touch point for this event
        var distx = parseInt(touchobj.clientX)
        var disty = parseInt(touchobj.clientY)
        statusdiv.innerHTML = 'Status: touchmove<br> Horizontal distance traveled: ' + '-' + distx + 'px'
        statusdiv1.innerHTML = 'Status: touchmove<br> vertical distance traveled: ' + disty + 'px'
        e.preventDefault()
    }, false)

    demo.addEventListener('touchend', function (e) {
        var touchobj = e.changedTouches[0] // reference first touch point for this event
        statusdiv.innerHTML = 'Status: touchend<br> Resting x coordinate: ' + touchobj.clientX + 'px'
        statusdiv1.innerHTML = 'Status: touchend<br> Resting y coordinate: ' + touchobj.clientY + 'px'
        e.preventDefault()
    }, false)

}, false)

function move($(obj).css({
    "background-color": "blue"
});) {
    if ()
}

Answer 1

如果您知道 x 和 y 坐标，您应该能够使用 elementFromPoint 获取此坐标下的元素方法:

var element = document.elementFromPoint(x, y);