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

本文实例讲述了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程序设计有所帮助。

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
本章内容根据本人在开发中常用到的选择符作为例子来进行讲解,如有更多常用的简单的例子可回复提供,参与讨论,一起学习研究,首先我们从常用的CSS选择符开始。 CSS选择符包括通配选择符、ID选择符、属性选择符、包含选择符、类选择符等,他们的基本格式为: 通配选择符:$("#ID *") 表示该元素下的所有元素。 ID选择符:$("#ID") 表示获得指定ID的元素。 属性选择符:$("input[type=text]") 表示type属性为text的所有input元素。 包含选择符:$("ul li a") 表
复制代码 代码如下: $("#feedbackContainer").scrollTop($("#feedbackContainer").height());
本文实例讲述了jQuery中:animated选择器用法。分享给大家供大家参考。具体分析如下: 此选择器匹配所有正在执行动画效果的元素。 可以使用animate()方法创建自定义动画。 语法结构: 复制代码 代码如下: $(":animated") 此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等。例如: 复制代码 代码如下: $("li:animated").css("background-color","blue") 以上代码能够将正在执行动画下过的li元素的背景颜色设置为蓝色。 如
有些需求是为了更直观的体现用户在文本框输入文本时能看到自己输入了多少字,并且有些特殊的要求字数不超过多少,下面是实现: 复制代码 代码如下: html head script src="jquery.js" type="text/javascript"/script script type="text/javascript" function tjzs(){ var count = $("#nr").val().length; if(count10){ var nr = $("#nr").val().sub

jQuery.holdReady()使用方法 - 2015-04-17 20:04:20

复制代码 代码如下: holdReady: function( hold ) { if ( hold ) { jQuery.readyWait++; // readyWait就是一个计数器,表示还有多少个条目就绪事件才能执行 } else { jQuery.ready( true ); } } 使用方法如下: jQuery.holdReady( hold ) 作用:暂停或恢复.ready() 事件的执行 参数:hold为boolean值,指示是否暂停或恢复被请求的ready事件 jQuery.holdRe
以前没写过jquery插件,在开发这个时,写一下代码,又看一下jquery插件的定义(如何开发之类的东东),来来去去的。 之所以要写这个插件,主要是为了往后的项目中方便实现这类型的功能,在之前做问卷调查那个应用中,就用到这个来显示结果,但当时开发时并不用是插件的,一大堆代码,看也烦,用起来很麻烦(当时就调了一个上午)。 还好,这个功能比较简单,正好合适新手写插件。 具体的效果如图: 这个也算是简单的比例图吧。 插件的具体的代码如下: 复制代码 代码如下: ; (function ($) { $.fn.per

myeclipse安装jQuery插件的方法 - 2015-04-17 20:04:20

1、在网上下载spket-1.6.12.zip压缩文件,解压后会看到eclipse目录下有features、plugins这两个文件夹 2、把features、plugins这两个文件夹下的文件复制黏贴到D:\myeclipse6.5\myeclipse\eclipse\目录下 (注意features、plugins要对应清楚哦) , 然后重启myeclipse 3、重启myeclipse后,打开 window - preference - spket - javascript profiles - ne

js 触发select onchange事件代码 - 2015-04-17 20:04:19

select 或text的onchange事件需要手动(通过键盘输入)改变select或text的值才能触发,如果在js中给select或text赋值,则无法触发onchang事件, 例如,在页面加载完成以后,需要触发一个onChange事件,在js中用document.getElementById("province").value="湖北";直接给select或text赋值是不行的,要想实现手动触发onchange事件,需要在js给select赋值后,加入下面的语句 document.getElemen
如下图所示: 源代码如下: 复制代码 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head title/title script type="text/javascript" //进行数据验证 function Vali
jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例,通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。用户可以无限浏览图片或内容无限加载瀑布流效果。 代码: script type="text/javascript"function item_masonry(){ $('.item img').load(function(){ $('.infinite_scroll').masonry({ itemSelector: '.masonry_brick