vue绑定使用touchstarttouchmovetouchend解析
短信预约 -IT技能 免费直播动态提醒
绑定使用 touchstart touchmove touchend
今天要做一个页面div长按后触发事件，简单学习后实现如下：
先看代码：
<template>
<div>
<div class="test" @touchstart="gtouchstart()" @touchmove="gtouchmove()" @touchend="gtouchend()">试一试呀!</div>
</div>
</template><script>
export default {
data () {
return {
}
},
methods:{
gtouchstart(){
window.console.log('1，按下啦啦啦啦啦')
},
gtouchmove(){
window.console.log('2，按下并且在移动呢')
},
gtouchend(){
window.console.log('3，松开啦啦啦啦啦')
}
}
}
</script><style scoped>
.test{
width: 100%;
height: 50px;;
text-align: center;
background-color: red;
line-height: 50px;
font-size: 50px;
}
</style>看结果：
鼠标在红色区域内按下会输出1，
按下鼠标不松开然后移动会输出2，
松开后就会输出3，
根据自己的情况在三个函数里写入相应的功能。
解决touchstart touchend事件无效失效
<van-button
:disabled="isLoading"
plain
type="info"
@touchstart.native.prevent="touchstart"
@touchend.native.prevent="touchend"
style="width:40%;height: 40px;"
round>对比原图
</van-button>@touchstart.native.prevent=“touchstart”
@touchend.native.prevent=“touchend”增加 .native.prevent
touchstart() {
console.log('touchstart')
},
touchend() {
console.log('touchend')
},
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
