在手机浏览器中,链接的点击会伴随着浏览器的默认效果。在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)去掉点击效果