vue 綁定使用 touchstart touchmove touchend解析
更新時(shí)間：2022年03月28日 09:36:50 作者：<s>LoCloudy</s>
這篇文章主要介紹了vue 綁定使用 touchstart touchmove touchend解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
綁定使用 touchstart touchmove touchend
今天要做一個(gè)頁面div長(zhǎng)按后觸發(fā)事件，簡(jiǎn)單學(xué)習(xí)后實(shí)現(xiàn)如下：
先看代碼：
<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，按下并且在移動(dòng)呢')
? ? ? ? },
? ? ? ? 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>看結(jié)果：
鼠標(biāo)在紅色區(qū)域內(nèi)按下會(huì)輸出1，
按下鼠標(biāo)不松開然后移動(dòng)會(huì)輸出2，
松開后就會(huì)輸出3，
根據(jù)自己的情況在三個(gè)函數(shù)里寫入相應(yīng)的功能。
解決touchstart touchend事件無效失效
?? ?<van-button ? ? ? ? ? :disabled="isLoading" ? ? ? ? ? plain ? ? ? ? ? type="info" ? ? ? ? ? @touchstart.native.prevent="touchstart" ? ? ? ? ? @touchend.native.prevent="touchend" ? ? ? ? ? style="width:40%;height: 40px;" ? ? ? ? ? round>對(duì)比原圖 ? ? ? ? </van-button>
@touchstart.native.prevent=“touchstart” @touchend.native.prevent=“touchend”
增加 .native.prevent
? ? touchstart() {
? ? ? console.log('touchstart')
? ? },
? ? touchend() {
? ? ? console.log('touchend')
? ? },
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章說明了如何使用Vue去刷新當(dāng)前頁面的多種方法實(shí)例,有完成的代碼提供參考,希望對(duì)你有所幫助2021-06-06
Vue3+Canvas實(shí)現(xiàn)坦克大戰(zhàn)游戲(一)
這篇文章將利用Vue3和Canvas編寫一個(gè)童年經(jīng)典游戲—坦克大戰(zhàn)，文中的示例代碼講解詳細(xì)，感興趣的小伙伴快來跟隨小編一起學(xué)習(xí)一下吧2022-03-03
這篇文章主要為大家介紹了樣式穿透vue中的scoped示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue中控制mock在開發(fā)環(huán)境使用,在生產(chǎn)環(huán)境禁用方式
這篇文章主要介紹了vue中控制mock在開發(fā)環(huán)境使用,在生產(chǎn)環(huán)境禁用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue中父子組件傳值,解決鉤子函數(shù)mounted只運(yùn)行一次的操作
這篇文章主要介紹了vue中父子組件傳值,解決鉤子函數(shù)mounted只運(yùn)行一次的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
解決vue watch數(shù)據(jù)的方法被調(diào)用了兩次的問題
這篇文章主要介紹了解決vue watch數(shù)據(jù)的方法被調(diào)用了兩次的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue webpack開發(fā)訪問后臺(tái)接口全局配置的方法
今天小編就為大家分享一篇vue webpack開發(fā)訪問后臺(tái)接口全局配置的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue項(xiàng)目中使用ueditor的實(shí)例講解
下面小編就為大家分享一篇vue項(xiàng)目中使用ueditor的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue3+vueuse實(shí)現(xiàn)放大鏡示例詳解
這篇文章主要為大家介紹了Vue3+vueuse實(shí)現(xiàn)放大鏡示例過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了在Vue中如何使用Cookie操作實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-07-07