Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

代理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,这样就不会带来样式上的影响了。
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^