jquery- 使用 elementFromPoint 通过 id 更改元素背景颜色

Question

我有一个网格，我想模仿在中制作的绘图功能 this link，问题是该代码上的功能在移动设备上不起作用。

如果我 touchmove 在控制台中通过的正方形，我设法获得了 id。出于某种原因，我无法通过 touchmove 更改正方形背景颜色。

这是我用来更改背景颜色的代码：

         var elementTouching = document.elementFromPoint( 
               distx, //x coordinate
               disty  //y coordinate
            );
    console.log(elementTouching.id); // check that the id does appear in the console


//i think that the problem is in the next row
    $(elementTouching.id).css({"background-color":"blue"});

这是完整的代码：

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>

js

                            createLoop();
            $('.b').bind('touchstart', StartDragSelect);
            $('.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, elementTouching) {

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

            console.log(id);
            console.log(obj);
            console.log(elementTouching)
            $(elementTouching.id).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()

         var elementTouching = document.elementFromPoint(
         distx,
         disty
         );
         console.log(elementTouching.id);

         var zxc = $(elementTouching.id).css({"background-color":"blue"});
         console.log(zxc);
         }, 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)

Answer 1

由于您将 id 传递给 jQuery，因此您需要使用 ID 选择器

$('#'+elementTouching.id).css({"background-color":"blue"});

或者只传递元素本身

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

jquery- 使用 elementFromPoint 通过 id 更改元素背景颜色

jquery- change element background color by id using elementFromPoint

javascript

jquery

event-handling

touchmove