jquery - element verändern die Hintergrundfarbe, indem Sie id mit elementFromPoint

Ich habe ein raster, ich will zu imitieren, die zeichnen-Funktion wurde in
dieser link, die Sache ist die, dass die Funktionen auf, die Codes funktionieren nicht auf mobilen Geräten.

Ich schaffte es, die id, wenn der Platz ich bin touchmove durch in der Konsole.
aus irgendeinem Grund kann ich nicht ändern, die quadratischen hintergrund-Farbe, die ich touchmove durch.

dies ist der code, den ich verwende, um die Hintergrundfarbe zu ändern:

         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"}); 

dies ist der gesamte code:

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)