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解决innerText浏览器兼容问题思路代码
May 17 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
xmlhttp缓存清除的2种解决方法
Dec 13 Javascript
js中数组(Array)的排序(sort)注意事项说明
Jan 24 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
JSON 数据格式详解
Sep 13 Javascript
php中and 和 &&出坑指南
Jul 13 Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 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技术开发技巧分享
2010/03/23 PHP
php快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
JS OffsetParent属性深入解析
2014/01/13 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
你应该知道的python列表去重方法
2017/01/17 Python
Python 2与Python 3版本和编码的对比
2017/02/14 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
python使用Matplotlib画条形图
2020/03/25 Python
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
德国购买健身器材:AsVIVA
2017/08/09 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
社保委托书怎么写
2014/08/02 职场文书
甲午风云观后感
2015/06/02 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书
小学四年级作文之写景
2019/08/23 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
python 镜像环境搭建总结
2022/09/23 Python