touchmove.stop.prevent用法完整示例
时间: 2023-12-21 19:03:08 浏览: 27
touchmove.stop.prevent是Vue.js中常用的事件修饰符,用于阻止touchmove事件的默认行为和事件冒泡。
以下是一个完整的示例:
```html
<template>
<div
class="container"
@touchmove.stop.prevent="onTouchMove"
>
<div class="inner"></div>
</div>
</template>
<script>
export default {
methods: {
onTouchMove(event) {
// 阻止touchmove事件的默认行为
event.preventDefault();
// 阻止事件冒泡
event.stopPropagation();
// 其他逻辑处理
console.log('touchmove事件被阻止了');
}
}
}
</script>
<style>
.container {
width: 300px;
height: 300px;
border: 1px solid #ccc;
overflow: auto;
}
.inner {
width: 500px;
height: 500px;
background-color: #f0f0f0;
}
</style>
```
在上面的示例中,我们用@touchmove.stop.prevent修饰符来监听div元素上的touchmove事件,并且调用onTouchMove方法来处理事件。在onTouchMove方法中,我们通过event.preventDefault()来阻止touchmove事件的默认行为,通过event.stopPropagation()来阻止事件冒泡。最后,我们在控制台输出了一条日志,用于验证touchmove事件是否被成功阻止了。