Имеется компонент 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);
}
}
На мобильных устройствах нету mouse* событий.
Нужно отслеживать touchstart, touchend, touchcancel, touchmove.
Работает так же, но в TouchEvent лежит массив (если вам, конечно, вам нужны координаты):
document.addEventListener('touchstart', (e) => {
console.log(e.touches);
}
Подобно можно почитать в документации
Сборка персонального компьютера от Artline: умный выбор для современных пользователей