Имеется компонент 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);
}
Подобно можно почитать в документации
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Есть скрипт, который при нажатии на ссылку добавляет некоторое значение в inputВот он:
Помогите решить проблему и возможно ли ее решитьСуть проблемы такая
Я пытался сделать так, чтобы круг находился на одном месте и вращался вокруг себя, но он вращается по страницеЯ только начинаю изучать SVG и застрял...