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