到目前為止,我正在嘗試在我的應(yīng)用程序中添加觸摸和拖動(dòng)功能,但沒有成功。這是想法:用戶觸摸一個(gè)元素來激活它他在元素的兄弟姐妹上移動(dòng)他的手指來激活它們?nèi)绻崎_手指,所有元素都將被停用我可以讓它與鼠標(biāo)事件完美地工作,但觸摸事件的工作方式似乎不同。我認(rèn)為這是因?yàn)橐坏┯|發(fā)了 touchstart,其他觸摸事件就會(huì)綁定到同一個(gè)初始目標(biāo)。在這里磨練我的裝備的是,touchend 可以綁定到父元素并工作......這是一個(gè)示例代碼。您可以看到它在使用鼠標(biāo)事件時(shí)按預(yù)期工作,但是如果您模擬觸摸,它就不再工作了。Vue.component('to-press', { template: `<span class="col-3 p-2 bg-light border" :class="{ 'bg-dark': isActive }" @mousedown="emitPanMode()" @touchstart="emitPanMode()" @mousemove="setActive()" @touchmove="setActive()"> </span>`, props: ['isPan'], data() { return { isActive: false, } }, methods: { emitPanMode() { this.isActive = true; this.$emit('on-pan'); }, setActive() { this.isActive = this.isPan; } }, watch: { isPan(val) { if (!val) { this.isActive = false; } } }})const app = new Vue({ el: "#app", data() { return { panMode: false, }; }, methods: { togglePanMode(val) { this.panMode = val; } }})
以與 mousedown/mousemove/mouseup 相同的方式處理
慕妹3242003
2021-09-30 10:13:32