“Поймать” событие touchmove в div javascript

186
14 мая 2018, 01:10

Есть канвас на которой рисуется произвольная линия по движению мыши и зажатию левой кнопки.

Работает только на ПК, на планшетах и андроидах вместо того чтобы линии рисоваться по дотрагиванию и проведению её по экрану мобилки, происходит банальная прокрутка страницы.

Касание повилось дивом, то есть блоком и рисовал на нем а не прокручивал страницу на андроиде или планшете.

Подскажите пожалуйста, что для этого нужно?

Answer 1

Используйте метод Event.preventDefault() для остановки всплытия события.
Тогда событие не попадет в обработчики родительского элемента со скроллбарами - и следовательно, мы избежим ненужной прокрутки свайпом.

initDrawCanvas(document.getElementById('test'));  
 
function initDrawCanvas(cnv) { 
  cnv.width  = cnv.clientWidth;  
  cnv.height = cnv.clientHeight;  
  cnv.contextMain = cnv.getContext('2d');  
  cnv.linesArr = [];  
  cnv.drawLines = function () { 
    this.contextMain.clearRect(0, 0, this.width, this.height);  
    this.contextMain.beginPath();  
    for (let line of this.linesArr) { 
      if (!line.x2 || !line.y2) 
        continue;  
      this.contextMain.moveTo(line.x1, line.y1);  
      this.contextMain.lineTo(line.x2, line.y2);  
    } 
    this.contextMain.stroke();  
    requestAnimationFrame(() => this.drawLines());  
  };  
  cnv.inputHandler = function (e) { 
    let bcr = this.getBoundingClientRect(),  
        x = (e.changedTouches[0].clientX || e.clientX) - bcr.left,  
        y = (e.changedTouches[0].clientY || e.clientY) - bcr.top;  
    switch (e.type) { 
      case 'touchstart': 
      case 'mousedown': 
        this.linesArr.push({ x1: x, y1: y });  
        break;  
      case 'touchmove': 
      case 'mousemove': 
        this.drawLines();  
      case 'touchend': 
      case 'mouseup': 
        let line = this.linesArr[this.linesArr.length - 1];  
        line.x2 = x; 
        line.y2 = y;  
        break;  
      default: 
        return;  
    } 
    e.preventDefault();  
  };  
  [ 
    'mousedown', 'mouseup', 'mousemove', 'touchstart', 'touchend', 'touchmove' 
  ].forEach(evtName => cnv.addEventListener(evtName, cnv.inputHandler));  
  cnv.drawLines();  
}
body { height: 200vh; } 
 
#test { 
  width: 100%; height: 40%;  
  border: 1px solid #ccc;  
}
<canvas id="test"></canvas>

READ ALSO
WordPress, таймер обратного отсчета T(-) Countdown

WordPress, таймер обратного отсчета T(-) Countdown

Как в таймере обратного отсчета T(-) Countdown для WordPress можно сделать, чтобы когда обратный отсчет подошел к нулю, то таймер каждый раз автоматически...

175
Получение позиции мышки в canvas

Получение позиции мышки в canvas

Надо получить позицию мышки в canvasКак это правильно сделать?

206
не закрывается scanner [дубликат]

не закрывается scanner [дубликат]

На данный вопрос уже ответили:

213