脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • Layui表格行内动态编辑数据

    Layui表格行内动态编辑数据

    本文主要介绍经典前端框架 layui 中的动态表格数据操作，结合 JQuery 动态编辑单元格中的数据，具有一定的参考价值，感兴趣的可以了解一下
    2021-08-08
  • JavaScript体验异步更好的解决办法

    JavaScript体验异步更好的解决办法

    本篇文章主要给大家讲述了JavaScript体验异步更好的解决办法，有这方面需要的朋友跟着学习参考下吧。
    2018-01-01
  • 基于rem的移动端响应式适配方案(详解)

    基于rem的移动端响应式适配方案(详解)

    下面小编就为大家带来一篇基于rem的移动端响应式适配方案(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)

    鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)

    这篇文章主要介绍了鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合的实例代码。需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • JavaScript中消除闭包的一般方法介绍

    JavaScript中消除闭包的一般方法介绍

    这篇文章主要介绍了JavaScript中消除闭包的一般方法介绍,本文直接给出了操作示例,需要的朋友可以参考下
    2015-03-03
  • javascript 浏览器检测代码精简版

    javascript 浏览器检测代码精简版

    javascript检测浏览器精简版，需要的朋友可以参考下。
    2010-03-03
  • 详解ES6 Fetch API HTTP请求实用指南

    详解ES6 Fetch API HTTP请求实用指南

    本次将介绍如何使用Fetch API（ES6 +）对REST API的 HTTP请求，还有一些示例提供给大家便于大家理解。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-11-11
  • JS获取鼠标坐标位置实例分析

    JS获取鼠标坐标位置实例分析

    这篇文章主要介绍了JS获取鼠标坐标位置的方法,结合实例形式分析了JavaScript常见的获取鼠标页面、屏幕等坐标位置的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-01-01
  • 前端防止用户重复提交js实现代码示例

    前端防止用户重复提交js实现代码示例

    这篇文章主要给大家介绍了关于前端防止用户重复提交js实现的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起看看吧
    2018-09-09
  • JS中比较冷门但非常好用的方法总结

    JS中比较冷门但非常好用的方法总结

    在Js中有一些比较冷门但是非常好用的方法，我在这里称之为高级方法，这些方法没有被广泛使用或多或少是因为存在一些兼容性的问题，不是所有的浏览器都读得懂的，这篇文章主要就是对这些方法做一个总结，让我们一起来看一下吧
    2023-06-06

最新评论