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 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
JS Timing
Apr 21 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 Javascript
JS功能代码集锦
May 04 Javascript
深入理解JS addLoadEvent函数
May 20 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
聊聊JS ES6中的解构
Apr 29 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 xml实例 留言本
2009/03/20 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
2017/12/20 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
Python判断字符串与大小写转换
2015/06/08 Python
Python设置默认编码为utf8的方法
2016/07/01 Python
python八大排序算法速度实例对比
2017/12/06 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
详解python多线程之间的同步(一)
2019/04/03 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
美国知名生活购物网站:Goop
2017/11/03 全球购物
文科教师毕业的自我评价
2014/01/16 职场文书
免职通知
2015/04/23 职场文书
应收账款管理制度
2015/08/06 职场文书
销售人员管理制度
2015/08/06 职场文书