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 事件对象的实现
Jul 13 Javascript
一个原生的用户等级的进度条
Jul 03 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
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
微信自定义菜单的处理开发示例
2015/04/16 PHP
JS代码放在head和body中的区别分析
2011/12/01 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
屏蔽IE弹出"您查看的网页正在试图关闭窗口,是否关闭此窗口"的方法
2013/12/31 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
javascript History对象原理解析
2020/02/17 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
Python中用max()方法求最大值的介绍
2015/05/15 Python
Python 探针的实现原理
2016/04/23 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
python中round函数如何使用
2020/06/19 Python
python 怎样进行内存管理
2020/11/10 Python
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
一套带网友答案的.NET笔试题
2016/12/06 面试题
linux面试题参考答案(2)
2015/12/06 面试题
初中毕业生的自我评价
2014/03/03 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
北京导游词
2015/02/12 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL