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

来源:-

Allen灬su

2016-12-12 19:23

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回答

  • qq_乐小孩_0
    2018-12-26 10:01:37

    加一行代码就可以了

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

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

         if (e.cancelable) {

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

             if (!e.defaultPrevented) {

                 e.preventDefault();

             }

         }

     });

  • 一神带亿坑
    2017-04-28 15:08:06

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

  • JS嘛霸哥
    2017-04-02 19:16:16

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

    一神带亿坑 回复JS嘛霸哥

    你是怎么解决“touchstart和touchmove不能触发”这个问题的?

    2017-04-28 15:09:19

    共 2 条回复 >

HTML5+CSS3实现春节贺卡

又逢新春佳节,春节贺卡搞起来,学会HTML5+CSS3实现春节贺卡

110058 学习 · 450 问题

查看课程

相似问题