События касания на мобильных браузерах

98
05 сентября 2021, 17:20

Имеется компонент Vue.js, где на Div весит обработчик событий мыши. Идея в том что вложенные div реагируют на события провода над ними мыши при нажатой левой кнопке.

<div id="parent_id" @mousemove="onmove" @mousedown="ondown">
   <div>Div1</div>
   <div>Div2</div>
</div>

JS Код следующего вида

data() {
  mouseIsDown: false 
},
mounted() {
   window.addEventListener("mousedown", this.mouseDown);
   window.addEventListener("mouseup", this.mouseUp);
}
methods() {
    mouseDown(event) {     
      this.mouseIsDown = true;     
    },
    mouseUp() {
      this.mouseIsDown = false;      
    },
    onmove(event) {
       if (this.mouseIsDown) {
          this.dosome(event.target);
       }
    },
    ondown(event) {
       if (this.mouseIsDown) {
          this.dosome(event.target);
       }     
    }
   dosome(target) {
     console.log(target.innerText);
   }
}

На мобильном браузере успешно отрабатывается нажатие, но событие mouseMove отсутствует. Как можно реализовать отлов события проведения нажатым касанием над элементом?

UPD Решение.


   mounted() {
      ...
      // Навешиваем обработчик события на родительский элемент
      document
      .getElementById("parent_id")
      .addEventListener("touchmove", this.touchMove);
   }
   methods : {
      touchMove(event) {
         // получаем касание
         const touch = event.changedTouches[0];   
         // вычисляем нажатый дочерний элемент  
         const target = document.elementFromPoint(touch.clientX, touch.clientY);
         // далее как обычно   
         this.dosome(target);
      }
   }
Answer 1

На мобильных устройствах нету mouse* событий.

Нужно отслеживать touchstart, touchend, touchcancel, touchmove.

Работает так же, но в TouchEvent лежит массив (если вам, конечно, вам нужны координаты):

document.addEventListener('touchstart', (e) => {
    console.log(e.touches);
}

Подобно можно почитать в документации

READ ALSO
При нажатии на кнопку - добавить значение в input, при повторном нажатии - убрать

При нажатии на кнопку - добавить значение в input, при повторном нажатии - убрать

Есть скрипт, который при нажатии на ссылку добавляет некоторое значение в inputВот он:

96
Про props img react JS

Про props img react JS

Как через Props добавить изображения? Обучение в React JS

106
Запустить видео в сафари, javascript

Запустить видео в сафари, javascript

Помогите решить проблему и возможно ли ее решитьСуть проблемы такая

110
Повернуть SVG-элемент, как изображение

Повернуть SVG-элемент, как изображение

Я пытался сделать так, чтобы круг находился на одном месте и вращался вокруг себя, но он вращается по страницеЯ только начинаю изучать SVG и застрял...

97