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 06 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 Javascript
浅谈关于JavaScript的语言特性分析
Apr 11 Javascript
Jquery 获取对象的几种方式介绍
Jan 17 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
js Math数学简单使用操作示例
Mar 13 Javascript
Angular短信模板校验代码
Sep 23 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
关于PHP5 Session生命周期介绍
2010/03/02 PHP
php SQL Injection with MySQL
2011/02/27 PHP
php调用mysql数据 dbclass类
2011/05/07 PHP
php控制文件下载速度的方法
2015/03/24 PHP
php快速排序原理与实现方法分析
2016/05/26 PHP
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
vue-cli webpack 引入swiper的操作方法
2018/09/15 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
python中的json总结
2018/10/11 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
查询优化的一般准则有哪些
2015/03/08 面试题
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
五一活动标语
2014/06/30 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
MySQL Innodb关键特性之插入缓冲(insert buffer)
2021/04/08 MySQL