首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

JS篇(028)-移动端 click 事件、touch 事件、tap 事件的区别

参考答案: 1.click 事件在移动端会有 200-300ms 的延迟,主要原因是苹果手机在设计时,考虑到用户在浏览网页时需要放大,所以,在用户点击的 200-300ms 之后,才触发 click,...mouseover mouseup 的触发 3.tap 事件在移动端,代替 click 作为点击事件,tap 事件被很多框架(如 zepto)封装,来减少这延迟问题, tap 事件不是原生的,所以是封装的...,那么具体是如何实现的呢?...display: none,而从上面的 tap 可以看出,有 touchstart、touchend,所以会 300ms 之后触发 click 事件,而 z-index 已经消失了,所以,触发了下面的...a 的 click 事件,注意: 我们认为 a 标签默认是绑定了 click 事件的。

5.7K40

vue.js实现阻止事件冒泡

当父子元素中都有点击事件的时候,为了让触发子元素事件时,不去触发父元素事件,可以在子元素事件添加stop来阻止事件冒泡。...,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号 .capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式 .once 是将事件设置为只执行一次,如 .click.prevent.once...阻止click事件冒泡(防止触发另一个事件)的方法 使用vue阻止子级元素的click事件冒泡。...简单得:可以直接用stop 按钮1 按钮2...方法二 可以自己写个阻止冒泡事件 然后在发生冒泡的元素调用这个事件 @click="_stopPropagation($event)" methods:{ _stopPropagation

5.8K10

代码触发,手动触发touchstart事件,touch事件click事件,自定义事件

工作中有时候会用到需要用代码去手动触发某个事件或者是自定义事件,通常触发click事件的做法为eleme.click(),遇到touchstart就行不通了。...可以使用以下方式 // 创建事件. var event = document.createEvent('Events'); // 初始化一个点击事件,可以冒泡,无法被取消 event.initEvent...('touchstart', true, false); // 设置事件监听. elem.addEventListener('touchstart', function (e) { //...e.target 就是监听事件目标元素 }, false); // 触发事件监听 elem.dispatchEvent(event); initEvent已经从 Web 标准删除,虽然一些浏览器目前仍然支持它...'touchstart', function (e) { ... }, false); // 触发event. elem.dispatchEvent(event); Event构造函数也可以使用自定义事件

4.6K30

Android触摸事件和mousedown、mouseup、click事件之间的关系

然而当option没有元素时,就不希望弹出下拉(比如在某些浏览器,点击select会默认出一个罩层效果,而此时没有数据选择的话,弹出比较不友好)。...首先想到是利用click事件控制,发现仍然会有下拉出现…实际这个是mousedown事件控制的。 这里就说明下click和mousedown、mouseup。...规范要求,只有在同一个元素上相继触发 mousedown 和 mouseup 事件,才会触发 click 事件;如果 mousedown 或 mouseup 的一个被取消,就不会触发 click 事件...return false后,就不会弹出下拉或者罩层了… 这里再介绍下鼠标的各个事件: DOM3 级事件定义了9个鼠标事件,简介如下。...从技术上说,这个事件并不是DOM2级事件规范规定的,但鉴于它得到了广泛支持,所以DOM3 级事件将其纳入了标准。 mousedown:在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件

2.6K30

js事件(event)

事件实现事件绑定): 事件的绑定就是:当这个事件发生的时候,运行一个或者多个方法(function),比如说当鼠标点击页面的时候,就弹出一个“事件”,则写成: document.onclick =...,如果想把这些默认行为取消了,相应的js代码如下: a.onclick = function(){return false}//方法里加个 return false,就是组织超链接点击时的跳转行为了;...;就可以了; 但是要强调的是:如果你的事件绑定是用addEventListener来实现的,那阻止默认行为必须用e.preventDefault = true; 事件传播和阻止事件传播:       当事件发生在子元素的时候...事件委托: 事件委托是利用事件的传播机制,通过判断事件源来实现的,是一种高性能的事件处理方式。对事件委托的好处和概念详见《高程3》的第402页; 我们通过一个简单的示例来看看事件的好处。...,但是性能不是最优的; return false;//阻止超链接的默认行为; } } 以下用事件委托实现 事件委托:事件委托就是利用事件传播的机制,无论哪一个页面元素,他的click事件都会最终传播到document

6.6K30

jQuery 双击事件(dblclick)时,不触发单击事件(click)

出处:jQuery 双击事件(dblclick)时,不触发单击事件(click) 在jQuery的事件绑定,执行双击事件(dblclick)时能触发两次单击事件(click)。...即一个标签元素(如div等),如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblclick...)时却会触发两次单击事件(click)。...mouseout,click,dblclick; 在双击事件(dblclick),触发的两次单击事件(click),第一次的单击事件(click)会被屏蔽掉,但第二次不会。...也就是说双击事件(dblclick)会返回一次单击事件(click)结果和一次双击事件(dblclick) 结果。而不是一次双击事件(dblclick)结果和两次单击事件结果(click)。

5.1K30

jQuery源码解析之click()的事件绑定

而下到达目标节点的过程,浏览器会检测 针对该事件的 监听器(用来捕获事件),并运行捕获事件的监听器。...(2)阶段二:Target 目标 浏览器找到监听器后,就运行该监听器 (3)阶段三:Bubbling 冒泡(目标到祖) 在事件自下而上(document->html->body->xxx)到达目标节点的过程...二、$().click() 作用: 为目标元素绑定点击事件 源码: //这种写法还第一次见,将所有鼠标事件写成字符串再换成数组 //再一一绑定到DOM节点上去 //源码10969行 jQuery.each...注意下 if ( one === 1 ) 这种情况,是 $().one()在on()里的具体实现,即调用一次on()后,就执行jQuery().off( event ),卸载事件。...:mouse|pointer|contextmenu|drag|drop)|click/, //事件类型的命名空间 //举例:var arr1 = "click.aaa.bbb".match

1.6K20

移动端click事件300ms延迟

chrome 32+,如果设置了上述meta标签,那浏览器就可以认为该网站已经对移动端做过了适配和优化,就无需双击缩放操作了。...目前而言,Internet Explorer 实现了指针事件,同时,现在已经有一些指针事件的 polyfills 可以在项目中使用了 指针事件的 polyfill 指针事件的 polyfill 比较多...所以,接下去我们要来看一些专门针对 300 毫秒延迟而生的解决方案 zepto等库的 tap事件 zepto 的touch模块自定义了tap事件,用于代替click事件,表示一个轻击操作。...touch模块实现tap的原理是绑定事件touchstart,touchmove和touchend到document上,然后通过计算touch事件触发的时间差,位置差来实现了自定义的tap,swipe等...基本原理:FastClick的实现原理是在检测到touchend事件的时候,会通过DOM自定义事件立即出发模拟一个click事件,并把浏览器在300ms之后真正的click事件阻止掉。

2.6K21
领券