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下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 Javascript
js控制浏览器全屏示例代码
Feb 20 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
layui文件上传实现代码
May 20 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
ES6 中可以提升幸福度的小功能
Aug 06 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 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实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
PHP实现验证码校验功能
2017/11/16 PHP
php语法检查的方法总结
2019/01/21 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
jquery创建div 实现代码
2009/04/27 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
全面解析JavaScript中“&&”和“||”操作符(总结篇)
2016/07/18 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
python中列表元素连接方法join用法实例
2015/04/07 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
Django实现网页分页功能
2019/10/31 Python
Python表达式的优先级详解
2020/02/18 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
params有什么用
2016/03/01 面试题
优秀食品类广告词
2014/03/19 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
观后感的写法
2015/06/19 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
导游经典开场白——导游词
2019/04/17 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers