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 相关文章推荐
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
Javascript读取cookie函数代码
Oct 16 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
Jan 28 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
Javascript实现信息滚动效果
May 18 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
Vue.js划分组件的方法
Oct 29 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 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
基于PHP遍历数组的方法汇总分析
2013/06/08 PHP
19个Android常用工具类汇总
2014/12/30 PHP
开启PHP的伪静态模式
2015/12/31 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
Require.js的基本用法详解
2017/07/03 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
Python字符编码与函数的基本使用方法
2017/09/30 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
如何保障Web服务器安全
2014/05/05 面试题
介绍一下linux的文件系统
2015/10/06 面试题
茶叶生产计划书
2014/01/10 职场文书
法学求职信
2014/06/22 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
初婚未育证明样本
2014/10/24 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android