2

Имеется компонент 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);
      }
   }

2
  • А на компьютере данный код работает? Мне кажется, должна быть потеря контекста вызова для mouseDown и mouseUp. 10 окт 2019 в 5:32
  • на компе все ок, события эти вешаются при создании на окно, и удаляются перед удалением компонента. Вопрос как "возюкание пальцем" и отлов нажатых элементов реализовать на мобилке.
    – Marat
    10 окт 2019 в 5:43

1 ответ 1

2

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

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

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

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

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

2
  • Во vue есть встроенные обработчики на мышь \@mousedown \@click и т.д, а на тач выходит нету?
    – Marat
    10 окт 2019 в 5:52
  • @Marat я не уверен, что нет встроенной поддержки, но точно есть библиотеки, которые добавляют поддержку vue2-touch-events
    – RTK
    10 окт 2019 в 6:00

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.