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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
前端开发必须知道的JS之原型和继承
Jul 06 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
微信小程序自定义可滑动日历界面
Dec 28 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
Aug 23 Javascript
vue开发拖拽进度条滑动组件
Sep 21 Javascript
vue.js实现照片放大功能
Jun 23 Javascript
后台获取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加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
PHP中的类型约束介绍
2015/05/11 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
委托书样本
2014/04/02 职场文书
园林系毕业生求职信
2014/06/23 职场文书
爱国影片观后感
2015/06/18 职场文书
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers