Web 技术研究所

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

Mobile设备上click事件产生矩形框

  当元素绑定了click事件后,在移动设备的浏览器上被点击时就会出现一个挥之不去的矩形框。点击时改变默认样式并没有什么不对的,只是我们使用click事件时针对未必是直接绑定这个事件的元素;而且元素未必是矩形的,不该对所有元素都使用矩形框。
  这个问题在之前的文章中就有提到过。这回遇到的是圆角的元素在点击时被加上矩形框显得不协调的问题。解决方案还是和之前的问题类似,只是这回稍微做了个封装。
<meta name="viewport" content="width=device-width,user-scalable=0" />
<style>
#button {
  width:100px;height:100px;
  text-align:center;
  font:32px/100px Verdana;
  color:#999;
  border:1px solid #CCC;
  border-radius:100%;
  background:#F5F5F5;
  box-shadow:0px 0px 10px #999;
  cursor:pointer;
  -webkit-user-select:none;
  -moz-user-select:none;
}
</style>
<div id="button">0</div>
<script>
button.addEventListener("tap",function(){
  this.textContent++;
});

(function(){
  var ua=navigator.userAgent;
  var isMobile=ua.match(/(Android|iPhone|iPad|iPod|Phone)|$/)[1];
  if(isMobile) //移动设备用touchstart和touchend模拟一个tap事件
    document.addEventListener("touchstart",function(e){
      var itv=setTimeout(timeup,200);
      e.target.addEventListener("touchend",touchend);
      function touchend(){
        clearTimeout(itv);
        timeup();
        tap(e.target);
      };
      function timeup(){
        e.target.removeEventListener("touchend",touchend);
      };
    });
  else //桌面设备直接把click事件触发到tap事件上
    document.addEventListener("click",function(e){
      tap(e.target);
    });
  function tap(target){
    var e=document.createEvent("Events");
    e.initEvent("tap",true,true);
    target.dispatchEvent(e);
  };
})();
</script>
  当然这并不能解决所有问题,由于使用的是在文档上绑定事件的方法,如果其它程序部分有停止冒泡的代码,事件可能不会被传递到文档上,造成无法触发tap的情况。还有测试代码中的UA判断也是比较简陋的,正式项目中可能需要更完善的判断。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^