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的一些看法
May 27 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
Vue 幸运大转盘实现思路详解
May 06 Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 Javascript
Vue实现购物车基本功能
Nov 08 Javascript
Vue 事件的$event参数=事件的值案例
Jan 29 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中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
python学生管理系统代码实现
2020/04/05 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
自动化专业个人求职信范文
2013/12/30 职场文书
成功的餐厅经营创业计划书
2014/01/15 职场文书
销售队伍口号
2014/06/11 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书
2016年教代会开幕词
2016/03/04 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python