移动端按住说话功能实现-CSDN博客

2019独角兽企业重金招聘Python工程师标准>>>

(function(){
    var LSwiperMaker = function(o){ 
        var that = this;
        this.config = o;
        this.control = false;
        this.sPos = {};
        this.mPos = {};
        this.dire;     
        this.config.bind.addEventListener('touchstart', function(e){ return that.start(e); } ,false);
        //this.config.bind.addEventListener('touchmove', function(e){ return that.move(e); } ,false);
        this.config.bind.addEventListener('touchend', function(e){ return that.end(e); } ,false);
    } 
     LSwiperMaker.prototype.start = function(e){
		$(".sound_gif").show();
                e.preventDefault();   //！！！阻止微信默认长按弹出的菜单
    }
    /*LSwiperMaker.prototype.move = function(e){   
        var point = e.touches ? e.touches[0] : e;
        this.control = true;
        this.mPos.x = point.screenX;
        this.mPos.y = point.screenY;
       	$("#play").css("left",this.mPos.x+"px");   
       	
    } */
    LSwiperMaker.prototype.end = function(e){
		$(".sound_gif").hide();
    } 
    window.LSwiperMaker = LSwiperMaker;
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);// 禁止微信touchmove冲突
}())
//创建新的LSwiperMaker对象，并传入要拖动的图标
var a = new LSwiperMaker({
	bind:document.getElementById("sound_reserve")
})

只需要touchstart和touchend事件配合

需要注意的是，构造函数LSwiperMaker里的this，指的是新创建的对象实例，在例子中指的是new创建的a对象。

传{bind:document.getElementById("sound_reserve")}入构造函数的参数o，

this.config = o;

也就是把传参o赋值给新建对象（例子是a）的config属性

this.config.bind.addEventListener('touchstart', function(e){ return that.start(e); } ,false);

这里的bind是传参o的一个属性，这里的意思是为bind的属性值绑定事件，也就是ID为sound_reserve的元素。

转载于:https://my.oschina.net/daladida/blog/736609