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 相关文章推荐
jQuery+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
javascript判断用户浏览器插件安装情况的代码
Jan 01 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
jQuery获取注册信息并提示实现代码
Apr 21 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
vue-hook-form使用详解
Apr 07 Javascript
利用JS制作万年历的方法
Aug 16 Javascript
JavaScript时间戳与时间日期间相互转换
Dec 11 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 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图片上传类带图片显示
2006/11/25 PHP
php目录操作函数之获取目录与文件的类型
2010/12/29 PHP
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
phpmailer在服务器上不能正常发送邮件的解决办法
2014/07/08 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
2011/09/19 Javascript
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
Python 编码处理-str与Unicode的区别
2016/09/06 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
详解Python 循环嵌套
2020/07/09 Python
移交协议书
2014/08/19 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
销售人才自我评价范文
2014/09/27 职场文书
小学安全教育主题班会
2015/08/12 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript