zepto.js中tap事件阻止冒泡的实现方法


Posted in Javascript onFebruary 12, 2015

本文实例讲述了zepto.js中tap事件阻止冒泡的实现方法。分享给大家供大家参考。具体如下:

最近在弄一个手机版的网站,本来想用jQuery Mobile,但文件太大了,所以用了zepto.js

由于移动网页中使用click事件会有延迟,所以就用上了zepto.js中的tap事件。

使用click事件可以使用stopPropagation来阻止冒泡,但tap使用该方法无效

现在我需要实现这样一个效果:点击a.btn这个按钮,然后显示div.panel,当我点击非div.panel时隐藏div.panel

$("a.btn").on("tap",function(e){
  e.stopPropagation();//该方法不起作用
  $("div.panel").show();
});
$(document).on("tap",function(e){
  $("div.panel").hide();
});

通过调试工具,得到e这个对象中有一个target属性,于是可以通过该属性来实现所需要的效果:

$("a.btn").on("tap",function(){
  $("div.panel").show();
});
$(document).on("tap",function(e){
  if(!$(e.target).hasClass("btn")){
    $("div.panel").hide();
  }
});

这样算是解决了

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 高级语法介绍
Jun 15 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
javascript面向对象之Javascript 继承
May 04 Javascript
javascript事件委托的方式绑定详解
Jun 10 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
JS获取指定月份的天数两种实现方法
Jun 22 Javascript
Django+vue跨域问题解决的详细步骤
Jan 20 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
JS解惑之Object中的key是有序的么
May 06 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
taro 实现购物车逻辑的实例代码
Jun 05 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
后台获取ZTREE选中节点的方法
Feb 12 #Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 #Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 #Javascript
javascript编写实用的省市选择器
Feb 12 #Javascript
jQuery遍历json中多个map的方法
Feb 12 #Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 #Javascript
javascript手工制作悬浮菜单
Feb 12 #Javascript
You might like
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
PDO实现学生管理系统
2020/03/21 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
js 判断 enter 事件
2009/02/12 Javascript
javascript CSS画图之基础篇
2009/07/29 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
javascript实现根据3原色制作颜色选择器的方法
2015/07/17 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
python求解水仙花数的方法
2015/05/11 Python
Python登录系统界面实现详解
2019/06/25 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
应届毕业生个人自荐信范文
2013/11/30 职场文书
给老婆的婚前保证书
2014/02/01 职场文书
增员口号大全
2014/06/18 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android