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 相关文章推荐
js+html+css实现鼠标移动div实例
Jan 30 Javascript
jQuery.extend()的实现方式详解及实例
Jun 29 Javascript
JS定时刷新页面及跳转页面的方法
Jul 04 Javascript
js中实现多态采用和继承类似的方法
Aug 22 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
JavaScript实现购物车基本功能
Jul 21 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
layui 弹出删除确认界面的实例
Sep 06 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
JavaScript 链表定义与使用方法示例
Apr 28 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
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
php的控制语句
2006/10/09 PHP
php在字符串中查找另一个字符串
2008/11/19 PHP
php 类自动载入的方法
2015/06/03 PHP
php上传图片类及用法示例
2016/05/11 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
javascript 获取表单file全路径
2009/12/31 Javascript
Javascript 匿名函数及其代码模式原理
2010/03/19 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
jquery 笔记 事件
2011/11/02 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
node.js的事件机制
2017/02/08 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
Python定时执行之Timer用法示例
2015/05/27 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
如何利用find命令查找文件
2015/02/07 面试题
校园十佳歌手策划书
2014/01/22 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
大专生找工作自荐书
2014/06/10 职场文书
超市店庆活动方案
2014/08/31 职场文书
婚内分居协议书范文
2014/11/26 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
给医院的感谢信
2015/01/21 职场文书
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP
golang elasticsearch Client的使用详解
2021/05/05 Golang
分享一些Java的常用工具
2021/06/11 Java/Android
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android