エンドポイントショット、スライド、および長押しイベントの移動


  • Bubble.vue

  • これは移動端のクリック、スライド、長押しイベントDemoです.
    /*
     * @Author: Rain 
     * @Date: 2019-01-03 20:48:10 
     * @Last Modified by: Rain
     * @Last Modified time: 2019-01-03 20:52:03
     *
     *  、 。
     */
    <template>
        <div>
            <button 
            @touchstart="start"   
            @touchmove="move" 
            @touchend="end"
            > 
            </button>
        </div>
    </template>
    
    <script>
    export default {
    name:"Bubble",
    data(){
        return{
           longClick:0,  //  
           timeOutEvent: 0,  //  
        }
      },
      methods: {
      start: function(){
        console.log("----start----")
        var that =this;
        this.longClick=0;  //  
        this.timeOutEvent =setTimeout(function(){
            that.longClick=1;  //   
            //  
            console.log(" ")
        },500)
          },
      move:function(e){
        console.log("move")
        clearTimeout(this.timeOutEvent);  //   
        this.timeOutEvent = 0;  //  
        e.preventDefault();  //  
      },
      end:function(){
        console.log("----end----")
        clearTimeout(this.timeOutEvent);  //  
        if(this.timeOutEvent!=0 && this.longClick==0){  //  
             // 
            console.log(' ')
         }
         return false;
        },
      }
    }
    </script>
    <style >
    
    </style>