代理click事件在Mobile上的问题

 

　　当一个容器的子元素不确定，或者很多时。为了省去在子元素上一一绑定事件的麻烦会直接在容器上绑定。因为很多事件都是可以从子元素上冒泡到容器上的。但这种做法在移动设备上会让元素的默认样式有点问题，因为touch操作对有事件监听的元素会有样式变化。
　　先来看下面的例子运行<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
</ul>
<script>
//$("ul").on("click","li",function(){
// console.log(this.innerHTML);
//});
document.querySelector("ul").onclick=function(e){
if(e.target.tagName!="LI")return;
console.log(e.target.innerHTML);
}
</script>

　　以上是在QQ浏览器和UC浏览器下触碰时的效果。我们更希望LI元素的样式改变，而不是UL元素改变吧？但这是做不到的，这是click的默认样式。所以，如果想更好地在移动设备上展示效果应该用toucu系列事件来代替click事件。
运行<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
</ul>
<style>
li:active {outline:2px solid rgba(0,0,255,0.3);}
</style>
<script>
var ul=document.querySelector("ul");
ul.addEventListener("touchstart",function(e){
var target=e.target;
if(target.tagName!="LI")return;
var i=setTimeout(function(){
ul.removeEventListener("touchend",touchend);
},500);
ul.addEventListener("touchend",touchend);
function touchend(e){
clearTimeout(i);
ul.removeEventListener("touchend",touchend);
if(target==e.target)
alert(e.target.innerHTML);
};
});
</script>　　这个代码看似很繁琐，实际上touchstart和touchend这一套动作可以封装起来做成一个touchtap之类的方法来模拟click，这样就不会带来样式上的影响了。

转载于:https://my.oschina.net/ajunCode/blog/727636