脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → zepto.js中tap事件阻止冒泡

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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 学习JSON.stringify的9大特性和转换规则

    学习JSON.stringify的9大特性和转换规则

    本文介绍JSON.stringify9大特性和转换规则,JSON.stringify()方法将一个JavaScript对象或值转换为 JSON 字符串,如果指定了一个replacer 函数,则可以选择性地替换值,或者指定的replacer是数组,则可选择性地仅包含数组指定的属性,更多内容需要的小火煸可以参考下面温行内容
    2022-02-02
  • JavaScript中undefined、null与NaN的区别

    JavaScript中undefined、null与NaN的区别

    undefined、null和NaN都属于javascript中的数据类型,本文主要介绍了 JavaScript中undefined、null与NaN的区别,具有一定的参考价值,感兴趣的可以了解一下
    2023-09-09
  • javascript记住用户名和登录密码（两种方式）

    javascript记住用户名和登录密码（两种方式）

    这篇文章主要通过两种方式介绍javascript记住用户名和登录密码，有需要的小朋友可以来参考下
    2015-08-08
  • 微信小程序实现写入读取缓存详解

    微信小程序实现写入读取缓存详解

    这篇文章主要介绍了微信小程序实现写入缓存与读取缓存详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • JS trim去空格的最佳实践

    JS trim去空格的最佳实践

    学习框架的我，又来了。看到 String 对象扩展这一部分，对 trim() 这个经常被来来说的方法比较感兴趣
    2011-10-10
  • D3.js实现饼状图的方法详解

    D3.js实现饼状图的方法详解

    相信大家都知道图表是数据图形化的表示，通过形象的图表来展示数据，比如条形图，折线图，饼图等。可视化图表可以帮助开发者更容易理解复杂的数据，提高生产的效率和Web应用和项目的可靠性。现在就让我们大家一起来学习用D3.js来实现饼图的方法，有需要的可以参考借鉴。
    2016-09-09
  • js表单元素checked、radio被选中的几种方法(详解)

    js表单元素checked、radio被选中的几种方法(详解)

    下面小编就为大家带来一篇js表单元素checked、radio被选中的几种方法(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • Javascript实现DIV滚动自动滚动到底部的代码

    Javascript实现DIV滚动自动滚动到底部的代码

    一个比较特殊的客户要求，在一个页面用表格显示数据，数据量不是很多，不希望使用浏览器的滚动条，只能在Div中滚动table中的数据，但是有个特殊的要求，就是必须将滚动条自动滚动到底部
    2012-03-03
  • JavaScript Archive Network 集合

    JavaScript Archive Network 集合

    JavaScript Archive Network 集合...
    2007-05-05
  • 你可能从未使用过的11+个JavaScript特性(小结)

    你可能从未使用过的11+个JavaScript特性(小结)

    这篇文章主要介绍了你可能从未使用过的11+个JavaScript特性(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01

最新评论