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的几种方法小结
Apr 25 Javascript
JQuery中SetTimeOut传参问题探讨
May 10 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
针对JavaScript中this指向的简单理解
Aug 26 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
vue组件之间通信实例总结(点赞功能)
Dec 05 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
后台获取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获取服务器时间的实现代码
2013/06/07 PHP
php函数实现判断是否移动端访问
2015/03/03 PHP
PHP使用mysqldump命令导出数据库
2015/04/14 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
yii去掉必填项中星号的方法
2015/12/28 PHP
PHP基本语法实例总结
2016/09/09 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
Vue 换肤的示例实践
2018/01/23 Javascript
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
全面解析Python的While循环语句的使用方法
2015/10/13 Python
python制作小说爬虫实录
2017/08/14 Python
Python IDLE入门简介
2017/12/08 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
python之列表推导式的用法
2019/11/29 Python
python画图常规设置方式
2020/03/05 Python
Python使用Pygame绘制时钟
2020/11/29 Python
全球度假村:Club Med
2017/11/27 全球购物
信电学院毕业生自荐书
2014/05/24 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
学校就业保障协议书
2019/06/24 职场文书
gateway网关接口请求的校验方式
2021/07/15 Java/Android
对象析构函数__del__在Python中何时使用
2022/03/22 Python