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 相关文章推荐
nicejforms——美化表单不用愁
Feb 20 Javascript
Script的加载方法小结
Jan 12 Javascript
JS跨域代码片段
Aug 30 Javascript
jquery ajax方式直接提交整个表单核心代码
Aug 15 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
javascript基本数据类型和转换
Mar 17 Javascript
vuejs简单验证码功能完整示例
Jan 08 Javascript
node.js实现简单的压缩/解压缩功能示例
Nov 05 Javascript
vue实现输入一位数字转汉字功能
Dec 13 Javascript
Element Tooltip 文字提示的使用示例
Jul 26 Javascript
如何理解Vue前后端数据交互与显示
May 10 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
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
yii去掉必填项中星号的方法
2015/12/28 PHP
jquery实现控制表格行高亮实例
2013/06/05 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
构建Vue大型应用的10个最佳实践(小结)
2019/11/07 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
wxpython学习笔记(推荐查看)
2014/06/09 Python
python表格存取的方法
2018/03/07 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
优秀团员个人的自我评价
2013/10/02 职场文书
运动会稿件200字
2014/02/07 职场文书
房地产开盘策划方案
2014/02/10 职场文书
《雨点》教学反思
2014/02/12 职场文书
开服装店计划书
2014/08/15 职场文书
承诺保证书格式
2015/02/28 职场文书
2015年领班工作总结
2015/04/29 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
聘任合同书
2015/09/21 职场文书
2016年清明节寄语
2015/12/04 职场文书
高二英语教学反思
2016/03/03 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
使用scrapy实现增量式爬取方式
2022/06/21 Python