zepto.js中tap事件阻止冒泡的实现方法

更新时间：2015年02月12日 11:36:38 作者：小虾虎鱼

这篇文章主要介绍了zepto.js中tap事件阻止冒泡的实现方法,实例分析了由冒泡产生的click延迟解决方法,需要的朋友可以参考下

本文实例讲述了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之Canvas_动力节点Java学院整理
这篇文章主要介绍了JavaScript之Canvas，Canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等
2017-07-07
uni-app的基本使用教程
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台，这篇文章主要介绍了uni-app的基本使用,需要的朋友可以参考下
2022-11-11
js获取随机颜色值的函数
随机颜色如何获取，在本文将为大家介绍下如何使用js来获取，感兴趣的朋友可以参考下
2013-09-09
JS事件Event元素(兼容IE,Firefox,Chorme)
今天，想聊聊JS事件对象。相信大家对于获得激发JS事件的原对象的理解，有的人可能简单停留在IE上。也就是window.event这个对象
2012-11-11
SyntaxHighlighter 3.0.83使用笔记
本文主要介绍了SyntaxHighlighter的配置及代码的使用，并附上在博客园中使用SyntaxHighlighter 3.0.83的案例，非常实用，这里推荐给大家。
2015-01-01
一篇文章让你轻松记住js的隐式转化
这篇文章主要给大家介绍了如何通过一篇文章让你轻松记住js的隐式转化的相关资料,通过在各种情况下发生的隐式类型的例子,来详细的了解隐式类型转换的过程,需要的朋友可以参考下
2022-01-01
JS控制输入框内字符串长度
这篇文章主要介绍了JS控制输入框内字符串长度,需要的朋友可以参考下
2014-05-05
js正则test匹配的踩坑及解决
这篇文章主要为大家介绍了正则test匹配的踩坑示例讲解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
使用layui的layer组件做弹出层的例子
今天小编就为大家分享一篇使用layui的layer组件做弹出层的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JS实现一键回顶功能示例代码
一键回顶功能想必大家在浏览网页时会经常遇到吧，实现的方法也有很多，在本文为大家介绍下js是如何实现的，感兴趣的朋友可以参考下
2013-10-10