为了账号安全,请及时绑定邮箱和手机立即绑定

为什么换了“touchstart”事件后,点击就没有效果了?

window.onload = function(){
	var music = document.getElementById("music");
	var audio = document.getElementsByTagName("audio")[0];

	//当音乐播放完停止的时候,自动停止光盘旋转效果
	audio.addEventListener("ended", function(event){
		// this.style.animationPlayState = "paused"; 安卓4.4以下和苹果6不兼容
		// this.style.webkitAnimationPlayState ="pasused"; 苹果6兼容,安卓不行
		music.setAttribute("class", "");
	},false);

	//点击音乐图标,控制音乐播放器效果
	// music.onclick = function(){
	// 	if(audio.paused){
	// 		audio.play();
	// 		// this.style.animationPlayState = "paused"; 安卓4.4以下和苹果6不兼容
	// 		// this.style.webkitAnimationPlayState ="pasused"; 苹果6兼容,安卓不行
	// 		this.setAttribute("class","play"); //没办法暂停在转动的位置,而是回到初始位置
	// 	}else{
	// 		audio.pause();
	// 		this.setAttribute("class","");
	// 	}
	// };

	//为了消除延迟,改用监听触摸事件,监听手机屏幕触摸
	music.addEventListener("touchstart", function(event){
		if(audio.paused){
			audio.play();
			this.setAttribute("class","play"); 
		} else{
			audio.pause();
			this.setAttribute("class","");
		};
	}, false);
};


正在回答

3 回答

加一行代码就可以了

$("body").on("touchstart", function(e) {

     // 判断默认行为是否可以被禁用

     if (e.cancelable) {

         // 判断默认行为是否已经被禁用

         if (!e.defaultPrevented) {

             e.preventDefault();

         }

     }

 });

0 回复 有任何疑惑可以回复我~

我也是touchstart和touchmove不能触发,该怎么进行移动端开发?求助

0 回复 有任何疑惑可以回复我~

我今天折腾了一天,发现只有touchstart不行,touchend, touchmove, click这三个事件都可以顺利触发,具体原理不明,我查了些资料,貌似click = touchstart[+touchmove]+tocuhend这些事件的合集

0 回复 有任何疑惑可以回复我~
#1

JS嘛霸哥

说错了,touchmove也不行,应该是为了保证用户不是误操作播放音乐,只有触发touchend这个事件的时候才确认能够播放,否则浏览器会阻止播放的调用吧。
2017-04-02 回复 有任何疑惑可以回复我~
#2

一神带亿坑 回复 JS嘛霸哥

你是怎么解决“touchstart和touchmove不能触发”这个问题的?
2017-04-28 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么换了“touchstart”事件后,点击就没有效果了?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信