fastclick 源码注解及一些基础知识点

发布时间：2016-10-31 01:25:06 所属栏目：教程来源：站长网

导读：副标题#e# 在移动端，网页上的点击穿透问题导致了非常糟糕的用户体验。那么该如何解决这个问题呢？问题产生的原因移动端浏览器的点击事件存在300ms的延迟执行，这个延迟是由于移动端需要通过在这个时间段用户是否两次触摸屏幕而触发放大屏幕的功能。那么

首先，我们给出页面结构:

<html>
    <body>
        <div class="div-outside">
            <div class="div-inside">
                <span class="span-click">a span for click</span>
            </div>
        </div>
    </body>
</html>

addEventListener的第三个参数决定该事件是否在捕获阶段执行，Event.cancelBubble 属性值(true/false)决定该事件是否冒泡，推荐使用Event.stopPropagation()阻止冒泡

事件捕获执行及效果:

document.querySelector('.span-click').addEventListener('click',function(e){
  console.log("span");
},!0);
document.querySelector('.div-inside').addEventListener('click',function(e){
  console.log("inside");
},!0);
document.querySelector('.div-outside').addEventListener('click',function(e){
  console.log("outside");
},!0);
document.body.addEventListener('click',function(e){
  console.log("body");
},!0);
document.addEventListener('click',function(e){
  console.log("html");
},!0);

// 输出
/* 
 * html
 * body
 * outside
 * inside
 * span
*/

事件冒泡执行及效果:

document.querySelector('.span-click').addEventListener('click',function(e){
  console.log("span");
},!1);
document.querySelector('.div-inside').addEventListener('click',function(e){
  console.log("inside");
},!1);
document.querySelector('.div-outside').addEventListener('click',function(e){
  console.log("outside");
},!1);
document.body.addEventListener('click',function(e){
  console.log("body");
},!1);
document.addEventListener('click',function(e){
  console.log("html");
},!1);

// 输出
/* 
 * span
 * inside
 * outside
 * body
 * html
*/

（编辑：成都站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

3/7

首页

尾页

intel的处理器排行怎么	win平台oracle rman备
用Oracle并行查询发挥	Oracle也有注入bug