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图片自动或手动切换示例附演示源码
Sep 04 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
js父页面与子页面不同时显示的方法
Oct 16 Javascript
jQuery常用且重要方法汇总
Jul 13 Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
JS实现导航栏楼层特效
Jan 01 Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 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下封装较好的数字分页方法
2010/11/23 PHP
PHP内核探索:变量概述
2014/01/30 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
jquery清空表单数据示例分享
2014/02/13 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
js电话号码验证方法
2015/09/28 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
使用Python求解最大公约数的实现方法
2015/08/20 Python
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
python清除函数占用的内存方法
2018/06/25 Python
使用Scrapy爬取动态数据
2018/10/21 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
学习礼仪心得体会
2014/09/01 职场文书
大学生党员个人总结
2015/02/13 职场文书
党员学习中国梦心得体会
2016/01/05 职场文书
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python