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中==与===操作符的比较
Mar 21 Javascript
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
Javascript 类与静态类的实现
Apr 01 Javascript
浅析Prototype的模板类 Template
Dec 07 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 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
如何开始收听短波广播
2021/03/01 无线电
PHP 压缩文件夹的类代码
2009/11/05 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
javascript Math.random()随机数函数
2009/11/04 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
详解Angular操作cookies方法
2018/06/01 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
python中PIL安装简单教程
2016/04/21 Python
python 网络编程常用代码段
2016/08/28 Python
Python pass详细介绍及实例代码
2016/11/24 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
css 元素选择器的简单实例
2016/05/23 HTML / CSS
通信工程毕业生自荐信
2013/11/01 职场文书
小学教育毕业生自荐信
2013/11/18 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
MySQL空间数据存储及函数
2021/09/25 MySQL