Некорректная работа onpointerup на тачскрине

Question

Задача - определять номера ячеек, в которых началось и закончилось касание пальцем или мышью. С мышью оба события pointerdown и pointerup работают без проблем. А вот на тачскрине почему-то после срабатывания pointerup все равно показывается номер ячейки, где сработало pointerdown. Включение/выключение свойства touch-action: none для таблицы ни на что не влияет. Кто-то может пояснить, в чем проблема?

 let board = document.querySelector('.chessboard');
            /*board.onmousedown*/ board.onpointerdown = startMoving;
            function startMoving(e){
            let target = e.target.closest('td');
            if(!target) {
                touchpos.innerHTML = 'не попал в ячейку!';//////////////
                return;
            }
            e.preventDefault();
            let y = target.parentNode.rowIndex;
            let x = target.cellIndex;
            touchpos.innerHTML = 'down - ' + (y*8 + x); /////////////////////

            /*board.onmouseup*/  board.onpointerup = function(e){
                let target = e.target.closest('td');
                touchpos.innerHTML = target; /////////////////////////////
                e.preventDefault();
                if(!target) {
                    touchpos.innerHTML = 'не попал в ячейку!';
                }else{
                    let y = target.parentNode.rowIndex;
                    let x = target.cellIndex;
                    touchpos.innerHTML = 'up - ' + (y*8 + x);
                }
            }       
        }

body{
    font-family:'SB Sans Text", Helvetica, Arial, sans-serif';
    overflow:hidden;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    user-select: none;
    -webkit-user-select: none;
    height: 100%;
    width: 100%;
}
.chessboard {
    position:fixed;
    touch-action: none;
}

.chessboard td{
    border:solid 1px #666666;
    width:50px;
    height:50px;
    max-height:50px;
    text-align:center;
    vertical-align: bottom;
touch-action: none;
}


#touchpos{
    bottom: 5%;
right: 5%;
    position: absolute;
    z-index: 100;
}

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<html>
    <body>
        <table class="chessboard">
            <tr>
                <td></td> 
                <td></td>
                <td></td>        
                <td></td>        
                <td></td>
                <td></td>        
                <td></td>        
                <td></td>  
            </tr>       
            <tr>
                <td></td>
                <td></td>
                <td></td>        
                <td></td>        
                <td></td>
                <td></td>        
                <td></td>        
                <td></td>  
            </tr>   
        </table>
        <div id="touchpos">
          здесь будет номер ячейки
        </div>

БЛОГ НА HUSL

Некорректная работа onpointerup на тачскрине

Ответы (0 шт):