手机浏览器 使用事件委托 点击非可点元素的默认点击效果问题

 

在手机浏览器中，链接的点击会伴随着浏览器的默认效果。在iphone中是背景会变黑，android根据不同版本各有各的样式。

 

但是当使用使用事件委托后需要注意下，如果被点击的元素不是可点击的元素的话（什么是可点击元素？像a标签，button，<input type="button"等等这样的），

手机浏览器会为整个部分添加点击效果。

参考下面例子

<div id="btnRow">
	<div>我是链接1</div>
	<a href="javascript:void(0)">我是链接2</a>
</div>

<script type="text/javascript">
	document.getElementById('btnRow').addEventListener('click', function(e){
		alert(e.target.innerHTML);
	});
</script>

 

在iphone上对应的点击效果如下

 

点击我是链接1，点击效果触发在整个大div。

 

点击我是链接2，点击效果正常

 

 

解决这个问题有两种办法

1. 保留点击效果：将<div>我是链接1</div>改为<div onclick>我是链接1</div>把他变为可点击元素

2. 不保留点击效果：添加-webkit-tap-highlight-color: rgba(255,255,255,0)去掉点击效果