全面阻止事件默认行为后a标签的跳转

全面阻止事件行为

---

• 当我们全面禁止事件默认行为的时候，在移动端a标签是无法进行跳转的
• 在谷歌移动端模拟器中可以跳转

<a href="http://www.baidu.com">百度一下</a>
<a href="http://www.baidu.com">百度一下</a>
<a href="http://www.baidu.com">百度一下</a>
<a href="http://www.baidu.com">百度一下</a>

/* 全面禁止默认事件，真机是无法跳转的 */
document.addEventListener('touchstart',function(ev){
	ev = ev||evevt
	ev.preventDefault()
})

解决方案

---

使用BOM来解决

使用BOM中的location属性，使用步骤如下

1. 获取所有的a标签
2. 遍历为a绑定事件
3. 调用location进行跳转
4. 防误触处理

// 获取所有的a标签
const aNodes = document.querySelectorAll('a')
for (let i = 0; i < aNodes.length; i++) {
	// 遍历绑定监听
	aNodes[i].addEventListener('touchstart',function(){
		location.href = this.href
	})
}

防误触

• 我们可以定义一个标识，来表示点击之后是否手指一动
• 并且使用touchend来进行触发事件

for(var i=0;i<aNodes.length;i++){
	aNodes[i].addEventListener("touchstart",function(){
		this.isMoved=false;
	})
	
	
	aNodes[i].addEventListener("touchmove",function(){
		this.isMoved=true;
	})
	
	
	aNodes[i].addEventListener("touchend",function(){
		if(!this.isMoved){
			location.href=this.href;
		}
	})
}