zepto js click - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

移动端click延迟及zepto的穿透现象转

解决延迟的思路： touchstart touchend是没有延迟的，可以在touchend时触发用户想要在click时触发的事件. zepto 解决click延迟的原理：自定义tap事件，当用户点击元素时...，touchend事件先发生, 当touchend事件冒泡到document时触发目标元素绑定的tap事件简单模拟zepto tap的实现方式（这里忽略touchstart与touchend的点击位置的判断...事件逻辑 }, false); zepto的tap穿透现象：遮罩层中有一个标签绑定了tap事件，触发时遮罩层消失，该标签正下方有一个绑定了click的按钮，此时点击上层的标签，同时也会触发下层元素的click...()来阻止后续的click事件 zepto为何不使用e.preventDefault()来解决穿透问题？...因为zepto的tap事件统一是在document的touchend时触发的，若在这里使用e.preventDefault()，那页面上所有元素在touchend后触发的事件都不会被执行了。

1.5K1 0

学习zepto.js(对象方法)

学习zepto.js(对象方法)[1] zepto也是使用的链式操作,链式操作:函数返回调用函数的对象....但并不是所有的对象方法都可以进行链式操作,举几个例子:.size(),.html()|.text()//不传参数的情况下; 若非特殊说明,下边介绍的方法都会返回zepto对象; add(): 支持一到二个参数...add函数本身无任何亮点- -,将两个参数原封不动的传入$()然后返回一个Zepto对象,执行concat函数,该函数会将所有参数添加至调用函数对象的末尾, toArray方法会调用get方法,当get...方法执行时而没有传入参数,会将该对象所有的匹配元素以数组的形式返回; uniq方法是一个数组去重的方法,返回的还是一个数组,然后回到add方法再次通过$()构造一个zepto对象并返回; addClass...通过each方法循环遍历对象,each方法会返回一个zepto对象.首先会判断元素是否存在className属性, 通过className方法获取到当前元素的所有className信息的字符串; ?

3.1K8 0

您找到你想要的搜索结果了吗？

是的

没有找到

学习zepto.js(对象方法)

学习zepto.js(对象方法)[2] 今天来说下zepto那一套dom操作方法, ['prepend', 'append', 'prependTo', 'appendTo',...这些方法的参数可以是一个dom节点,也可是是一个html片段,或者Zepto对象; prepend(): 将参数插入对象内部的头部; ? append(): 将参数插入对象内部的尾部; ?...上边那个数组是储存的几个操作的名称,下边的forEach循环是在zepto自执行函数中执行的,就是说,在构件zepto原型的是否就创建了这几个方法; forEach方法回调返回的参数,第一个是值,第二个是值的下标

3K6 0

学习zepto.js(原型方法)

学习zepto.js(原型方法)[1] 新的一周,新的开始,今天来学习一下zepto里边的原型方法,就是通过$.进行调用的方法,也是可以通过$.fn进行扩展的方法: $.camelCase...(本人发现zepto中的原型方法都是通过将匿名函数赋值给变量的方式来进行声明的,而直接使用function声明的函数在外部是获取不到的)解释的不详细，是因为原型方法都有一个原型的引用，而那些普通函数没有做这个引用...,所以说,使用$.extend来使$.fn继承某些方法,进行扩展插件. $.fn.alert = function () {　　 alert(this.html());//this指向调用该方法的Zepto...,如果有多个,须结合$.extend使用*/ $.extend($.fn, { alert: function () { alert(this.html());//this指向调用该方法的Zepto...对象　}, confirm : function () { confirm(this.html());//this指向调用该方法的Zepto对象　} }); PS:为了配合链式操作,

2.3K9 0

学习zepto.js(对象方法)

学习zepto.js(对象方法)[4] 今天说说那一套获取元素集合的一些方法: ["children", "clone", "closest", "contents", "empty...如果不填则是所有子节点,否则为匹配的所有子节点; $("#demo").children();//-->所有的子节点 $("#demo").children("li");//-->所有的li子节点返回的是一个zepto...如果不是一个字符串,就判断是否是一个类数组,并且对象的item是一个方法,(是的,变相的判断为一个zepto对象.) 其余的情况,直接通过参数构建一个zepto对象....以上操作均为给excludes变量赋值; 在最后,通过循环对象.将对象中不存在于excludes变量中的所有元素取出.并构件为一个zepto对象....可以传入一个zepto对象,或者一个dom标签数组.一个html片段.等等…… 当然最后返回的对象决不会存在于not的参数中. //indexOf就是数组的原生方法

2.9K6 0

学习zepto.js(Hello World)

学习zepto.js(Hello World) Zepto是一个轻量级的针对现代高级浏览器的JavaScript库，它与jquery有着类似的api。...昨天听说了zepto.js,正好最近也比较闲,所以就学习一下这个著名DOM操作库,由于本人刚接触这个,但又不想单纯的说如何使用,所以本人会按照API顺序来说明方法如何使用并试着将对于源码的理解写上来;...$(): 　　与jQuery的$()几乎一样,但zepto的选择器是直接使用的原生querySelectorAll(),所以,一些jQuery自定义的选择器是不支持的,但可以添加selector.js...最后返回的一个变量经过Zepto的构造函数摇身一变为Zepto对象。...接下来说一下$构造器中用到的一些其他函数; 　　像通过zepto对象调用的方法，都是可以在其他地方通过$（Zepto）.zepto[方法名]调用的，如 $.zepto.qsa(); 　　而通过$.fn

4.1K8 0

学习zepto.js(对象方法)

学习zepto.js(对象方法)[5] clone: 该方法不接收任何参数,会返回对象中的所有元素集合,但不会对象绑定的事件. var $temp =$("div").clone...> hello world js.../zepto.js"> body *{ color: #000; } zepto对象; contents: contents用来获取zepto所有对象的子节点（包括文本，注释），或者zepto某对象为一个iframe时，则获取该iframe的document...首先判断是否传入选择器，如果没有则直接返回一个空的zepto对象；如果选择器为一个对象，则将对象转换为zepto对象，然后通过filter筛选出一些匹配的节点，并存入result集合；如果调用find

3.1K11 0

学习zepto.js(对象方法)

学习zepto.js(对象方法)[3] 继续说zepto里attributes的相关操作. attr,removeAttr,prop这三个方法....string字符串 $("").attr("id"); //--> "special" 注意:只能返回对象中第一个节点的属性值 set: 返回值为一个zepto...>").attr("id","special"); //--> [] 第二个参数也可以传入一个function,有两个参数可以使用 1:index,zepto...那是zepto.js中文api中所说的.本人认为,在判断有关交互的属性时,应优先使用prop,比如checked和selected; ? ? 之所以为出现差异,是因为两者底层实现的区别. ?...一个来自prototype.js大表哥中的方法; 传入一个属性名,将调用者集合中所有的该属性的值作为一个数组返回; 其余的没什么了. 如果有什么疑惑的地方还请留言问我.大家共同学习

3K9 0

学习zepto.js(原型方法)

学习zepto.js(原型方法)[2] 接着昨天的来,继续说原型方法,昨天的传送阵(昨天出了点小意外,博文经过WP手机的UC浏览器进行编辑后标签就露出来了- -,现已修复);..."aaa", ["aaa", "bbb", "ccc", "ccc", "aaa"], 3) // -->4 inArray方法也是直接调用了Array的idnexOf方法,这些都是ES5的新方法,在zepto...函数通过一个三元运算符来判断是否为空,然后调用对象的toString方法,返回一个类似[object Array]这种格式的字符串, 再放入一个Mapping中,就是class2type(class to type),在zepto...isPlainObject({}); // ..> true $.isPlainObject(new Object()); // --> true $.isPlainObject(1); // --> false zepto...今天先说到了这里,zepto里边的原型方法出了ajax模块的就都已经说完了- -,读源码真的是最快的学习方式.

1.6K5 0

学习zepto.js(对象方法)

学习zepto.js(对象方法)[6] first: 获取当前对象集合中的第一个dom元素。...$("div").first();// 返回第一个div对象（zepto对象） //相当于 $("div").eq(0); 与之对应的是last last: 获取当前对象集合中的最后一个dom元素。...$("div").last();// 返回最后一个div对象（zepto对象） //相当于 $("div").eq(-1); 两方法不接收任何参数。 ?...个人认为调用isObject方法没什么用，因为zepto对象集合里存放的都是dom元素。//也许是我无知吧- - 被大神点醒了。这样做也许是为了这种场景 ?...（dom对象,不是zepto对象） $("div").get(); 　　　　 //所有div对象组成的一个数组该方法与eq方法的区别在于，eq返回的是zepto对象，而get返回的是dom对象，$()

3K8 0

Knockout.Js官网学习（click绑定）

-2.3.0.debug.js"> var viewModel = { numberOfClicks...传参数给你的click 句柄最简单的办法是传一个function包装的匿名函数： click: function() { viewModel.myFunction...访问事件源对象有些情况，你可能需要使用事件源对象，Knockout会将这个对象传递到你函数的第一个参数： click: myFunction"> Click...me event js">click的自定义函数里返回true。防止事件冒泡默认情况下，Knockout允许click事件继续在更高一层的事件句柄上冒泡执行。

3.7K2 0

向zepto.js学习如何手动(trigger)触发DOM事件

这篇文章主要想说一下zepto中事件模块(event.js)的trigger实现原理。...原文地址仓库地址 event.js模块 zepto中由许多小的模块组合合成，基础的zepto.js模块,event.js事件处理模块,ajax.js请求处理模块等等。...click事件 $list.off('click') // 手动触发事件 $list.trigger('click', 'qianlongo') 哥们你逗我呢，jQuery，zepto多熟了，谁不会用这个啊...为了直接切入不易理解，我们先来看看zepto中是如何给基础的zepto.js模块添加功能的首先看看zepto.js模块 var Zepto = (function () { // xxxx var...而$.fn就是其原型如何给zepto.js模块增添功能 zepto.js模块只有一些基础的功能，比如给dom添加事件的功能就没有，怎么添加呢？

3.9K2 0

向zepto.js学习如何手动(trigger)触发DOM事件

这篇文章主要想说一下zepto中事件模块(event.js)的trigger实现原理。原文地址仓库地址 ?...event.js模块 zepto中由许多小的模块组合合成，基础的zepto.js模块,event.js事件处理模块,ajax.js请求处理模块等等。...其中event.js事件处理模块的核心完成了zepto中事件绑定on，移除off还有手动触发trigger等功能。我们简单回顾下如何使用zepto的这三大功能。...为了直接切入不易理解，我们先来看看zepto中是如何给基础的zepto.js模块添加功能的首先看看zepto.js模块 var Zepto = (function () { // xxxx var...而$.fn就是其原型如何给zepto.js模块增添功能 zepto.js模块只有一些基础的功能，比如给dom添加事件的功能就没有，怎么添加呢？

5.1K5 0

js中click事件导致当前页面重新加载

下面的js代码是很常见的一段jquery代码 $("#verifyFailConfirm").click(function(){ var reason = $("#failReasonText...但是实际结果却是没有任何提示而页面却无故重新加载，导致这个问题的原因是上面标红部分，上面标红部分的作用类似于return true，这句话就会导致当前页面重新加载，下面是正确的代码： $("#verifyFailConfirm").click

9.5K3 0

jq和zepto

目录类库和框架的区别写法 jq操作样式属性事件 class dom操作效果类库和框架的区别 jq jq是一个功能丰富，轻量级的类库 zepto.js zepto.js 是更轻量级的类库....attr('href') $('#test-img').attr('data-src') 删除属性 $('#test-img').removeAttr('src') 事件 $('#ck').on('click...',function(){ }) click 鼠标点击事件 mouseenter 鼠标移入 mouseleave 鼠标移出 bind 事件绑定 class 添加class obj.addClass

2.4K1 0

移动端项目经验 JavaScript

在这里简要整理一些JavaScript在移动端的项目经验，主要包括click点击事件延迟、元素高亮点击区、zepto的touch问题等。...移动端click时间300ms延迟在移动端，click点击事件会造成300ms的延迟，造成这种延迟的原因在于：当用户一次点击屏幕之后，浏览器并不能立刻判断用户是要进行双击缩放，还是想要进行单击操作。...对于这种体验不佳的问题，我们可以使用tap等事件来替代，而tap事件属于模拟类事件，需要引入zepto.js或者百度的touch.js等插件辅助实现。...也可以通过使用fastclick.js来解决click的延迟（这个不是使用tap事件去替代）。...另一种方法则是放弃zepto了~

1.7K8 0

Click fireworks

pointer-events: none;" > js..."> js"> 如果有问题的话尝试添加下面这段代码到你的 head.ejs js

1.3K2 0

11-移动端开发教程-zepto.js入门教程

Zepto.js是一个轻量级的针对现代浏览器的JavaScript库，它与jquery有着类似的api。如果你会用jquery，那么你也会用zepto。 1. Why Zepto.js？...API类似jQuery，熟悉jQuery可以无缝迁移到Zepto.js Zepto仅针对高版本现代浏览器设计了最小核心的通用库，代码体积小，尤其适合移动端开发。...Zepto.js下载代码下载：zeptojs中文站、 github 2.1 自定义Zepto.js文件模块 zepto默认是有五个模块的，分别为zepto、event、ajax、form、ie，这五个模块被称为核心模块...list item 3 a paragraph $(function() { $("p").on('click...总结 zepto.js确实非常小巧，而且非常讨巧的利用了大家熟悉jQuery的优势，确实非常可爱的一个js库，设计的模块中庸而又实用，在移动端的触屏事件封装的很不错，移动端web开发值得推荐。

2.6K5 0

zepto的构造器$

在zepto中，通过$来构造对象 $ = function(selector, context){ return zepto.init(selector, context) } 由该函数，实际上...given, return an empty Zepto collection //返回一空的zepto对象 if (!...else dom = zepto.qsa(document, selector) } // create a new Zepto collection from the nodes found...条件判断里的代码需要注意一点，即将dom转成zepto对象.使其能调用$的attr方法，attr函数留在后面。...重新回到init函数，接下来的都是一些条件判断，其中有一个是选择器函数即zepto.qsa zepto.qsa = function(element, selector){ var found

7602 0

zepto的ready方法

zepto中的ready函数是作为$.fn的一个方法，即作为一个zepto对象的方法 readyRE = /complete|loaded|interactive/; ready: function(callback...所以在zepto中，必须检测document.readyState的值来判断下一步的进行的动作。

1.4K2 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭