首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

移动端前端常见的触摸相关事件touch、tap、swipe等整理

3. tap类事件 事件,我目前还不知道它和touch的区别,一般用于代替click事件,有tap longTap singleTap doubleTap四种之分 tap: 手指碰一下屏幕会触发...快速点两下,如图为相关事件触发的顺序,可以看到click事件因为延迟的原因只触发了一次 ? 长按,如图为相关事件触发的顺序 ? 向右滑动一下,如图为相关事件触发的顺序 ?...长按的时候无意间触发了浏览器自身的复制文本功能,此时触发了touchcancel事件 ?...targetTouches:保存了当前所碰屏幕的手指信息 touches:保存了当前所有碰屏幕的手指信息 2....第三方插件监听 1) 使用jquery   为了查看三个属性的区别,简单地只监听一个事件 $('.one, .two, #test'

2K20
您找到你想要的搜索结果了吗?
是的
没有找到

jQuery 事件注册、事件处理

1. jQuery 事件注册 ​ jQuery 为我们提供了方便的事件注册机制,是开发人员抑郁操作优缺点如下: 优点: 操作简单,且不用担心事件覆盖等问题。...事件处理 ​ 因为普通注册事件方法的不足,jQuery又开发了多个处理方法,重点讲解如下: on(): 用于事件绑定,目前最好用的事件绑定方法 off(): 事件解绑 trigger().../ triggerHandler(): 事件触发 2.1 事件处理 on() 绑定事件 ​ 因为普通注册事件方法的不足,jQuery又创建了多个新的事件绑定方法bind() / live() /...3. fn:回调函数 即绑定在元素身上的侦听函数。 on() 方法优势1: 可以绑定多个事件,多个处理事件处理程序。...$("p").off() // 解绑p元素所有事件处理程序 $("p").off( "click") // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名 $("ul").off(

3.8K20

JavaScript动漫作品(闭幕)

因此,我们代码将使得事件处理程序在现代浏览器和IE8种可工作 作为一方面的说明。这是一种使用一个强大JavaScript库的原因,比方jQuery。...jQuery已经为你做好了全部的跨浏览器測试,因此,你仅仅须要输入一个命令,jQuery会在幕后翻译它使得它在每一个浏览器中都可用。...此外,很多jQuery命令都比核心JavaScript更加直观、简单。...可是这是一个事件侦听器,我们将自己主动拥有一个叫做e的变量,这个变量存储有和事件相关的信息,比方鼠标数据。可是不同浏览器存储的方式不同,我们不得不添加额外的一个步骤。...由于触摸屏表现得有些不同,我们须要在事件侦听器上做一些额外的编码。 支持触摸屏 我们须要为触摸屏制定一些新规则:在stage上。

1K00

window的onload事件和domcontentloaded执行顺序

jQuery 3.0开始,jQuery确保在一个处理程序中发生的异常不会阻止随后添加的处理程序执行。 大多数浏览器以事件的形式提供类似的功能DOMContentLoaded。...相反,DOMContentLoaded事件触发后添加的事件侦听器永远不会执行。 浏览器还在对象load上提供事件window。当此事件触发时,表示页面上的所有资源都已加载,包括图像。...可以在jQuery中使用查看此事件$( window ).on( "load", handler )。如果代码依赖于加载的资源(例如,如果需要图像的尺寸),则应将代码放在load事件的处理程序中。...注意,尽管DOM总是在页面完全加载之前就绪,但是在 .ready()处理程序期间执行的代码中附加加载事件侦听器通常不安全。...尽管由 .ready() 添加的处理程序总是在动态加载的脚本中执行,但是窗口的加载事件已经发生,并且这些侦听器永远不会运行。

3.6K10

事件高级

()方法将指定的监听器注册到 eventTarget(目标对象) 上,当该对象 发指定的事件时,指定的回调函数就会被执行。...事件侦听注册事件 addEventListener // (1) 里面的事件类型是字符串 必定加引号 而且不带on // (2) 同一个元素 同一个事件可以添加多个侦听器(事件处理程序)...那么this 就指向ul console.log(this); // ul // e.target 触发了事件的对象 我们点击的是li...什么是事件委托 把事情委托给别人,代为处理。 事件委托也称为事件代理,在 jQuery 里面称为事件委派。 说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码在父元素的事件中执行。... // 事件委托的核心原理:给父节点添加侦听器, 利用事件冒泡影响每一个子节点 var ul = document.querySelector

1.2K10

浏览器调试小技巧

选择DOM元素 如果熟悉jQuery,就会知道 $('.class') 和 $('#id') 选择器有多么重要。它们根据与之关联的类或 ID 选择 DOM 元素。...但是当你没有引用 jQuery时,你仍然可以在谷歌开发控制台中进行同样的操作。...查找与DOM中的元素关联的事件 调试时,需要查找 DOM 中某个元素的事件侦听器感时,谷歌控制台用了 getEventListeners使找到这些事件更加容易且直观。...查找与DOM中的元素关联的事件 要找到特定事件侦听器,可以这样做: getEventListeners($(‘selector’)).eventName[0].listener 这将显示与特定事件关联的侦听器...例如: getEventListeners($(‘firstName’)).click[0].listener 将显示与 ID 为 'firstName' 的元素的单击事件关联的侦听器。

1.6K10

常见的三个 JS 面试题

注意,我们将在下面的示例中使用原生的 JavaScript,因为面试官通常希望了解你在没有 jQuery 等库的帮助下对JavaScript 和 DOM 的理解程度。...然后,函数将创建 10,000 个独立的事件侦听器,并将每个事件监听器绑定到 DOM ,这样代码执行的效率非常低下。 在面试中,最好先问面试官用户可以输入的最大元素数量是多少。...如果你的应用程序最终可能有数百个事件侦听器,那么更有效的解决方案是将一个事件侦听器实际绑定到整个容器,然后在单击它时能够访问每个列表项, 这称为 事件委托,它比附加单独的事件处理程序更有效。...对应到实际的交互上是一样一样的:每当用户触发了一次 scroll 事件,我们就为这个触发操作开启计时器。...args); } } } // 用throttle来包装scroll的回调 const better_scroll = throttle(() => console.log('触发了滚动事件

1.2K20

Javascript 面试中经常被问到的三个问题!

注意,我们将在下面的示例中使用原生的 JavaScript,因为面试官通常希望了解你在没有 jQuery 等库的帮助下对JavaScript 和 DOM 的理解程度。...然后,函数将创建 10,000 个独立的事件侦听器,并将每个事件监听器绑定到 DOM ,这样代码执行的效率非常低下。 在面试中,最好先问面试官用户可以输入的最大元素数量是多少。...如果你的应用程序最终可能有数百个事件侦听器,那么更有效的解决方案是将一个事件侦听器实际绑定到整个容器,然后在单击它时能够访问每个列表项, 这称为 事件委托,它比附加单独的事件处理程序更有效。...对应到实际的交互上是一样一样的:每当用户触发了一次 scroll 事件,我们就为这个触发操作开启计时器。...args); } } } // 用throttle来包装scroll的回调 const better_scroll = throttle(() => console.log('触发了滚动事件

86720

jquery要怎么写才能速度最快?(转…

为了获取这个属性,必须连续两次调用jQuery,第一次是$(this),第二次是attr('id')。 事实上,这种处理完全不必要。...事件的委托处理(EventDelegation) javascript的事件模型,采用"冒泡"模式,也就是说,子元素的事件会逐级向上"冒泡",成为父元素的事件。...元素上面就可以了,因为td元素发生点击事件之后,这个事件会"冒泡"到父元素table上面,从而被监听到。...因此,这个事件只需要在父元素绑定1次即可,而不需要在子元素上绑定100次,从而大大提高性能。这就叫事件的"委托处理",也就是子元素"委托"父元素处理这个事件。 具体的写法有两种。...唯一的区别在于,.delegate()是当事件冒泡到指定的父元素时触发,.live()则是当事件冒泡到文档的根元素后 发,因此.delegate()比.live()稍快一点。

1.6K30

vue之组件边界情况处理

它提供了一种机会,可以在后期随时达父级组件,以替代将数据以 prop 的方式传入子组件的方式。 在绝大多数情况下,达父级组件会使得你的应用更难调试和理解,尤其是当你变更了父级组件的数据的时候。...程序化的事件侦听器 现在,你已经知道了 $emit 的用法,它可以被 v-on 侦听,但是 Vue 实例同时在其事件接口中提供了其它的方法。...我们可以: 通过 $on(eventName, eventHandler) 侦听一个事件 通过 $once(eventName, eventHandler) 一次性侦听一个事件 通过 $off(eventName..., eventHandler) 停止侦听一个事件 你通常不会用到这些,但是当你需要在一个组件实例上手动侦听事件时,它们是派得上用场的。...想了解更多程序化侦听器的内容,请查阅实例方法 / 事件相关的 API。 注意 Vue 的事件系统不同于浏览器的 EventTarget API。

1K50

10-移动端开发教程-移动端事件

2.4 touchend事件 ​ 当用户的手指抬起的时候,会触发 touchend 事件。如何用户的手指从屏设备的边缘移出了屏设备,也会触发 touchend 事件。...触摸手势封装相关的框架及事件 手势相关的事件一般就是tap类(屏)和滑动(swipe)事件两类。...5.1 tap类事件 事件,我目前还不知道它和touch的区别,一般用于代替click事件,有tap longTap singleTap doubleTap四种之分。...5.3 zepto的手势相关事件 Zepto.js 是一个轻量级的针对现代高级浏览器的JavaScript库, 它适配了jQuery的大部分api,也就是jQuery怎么用,Zepto.js就怎么用。...移动端点击穿透问题 如果某个返回按钮的位置,恰好在要返回的这个页面的带有href属性的a标签的范围内,在点击返回按钮后,页面快速切换到有a标签的页面,300ms后触发了click事件,从而触发了a标签的意外跳转

6.4K70

10-移动端开发教程-移动端事件

如何用户的手指从屏设备的边缘移出了屏设备,也会触发 touchend 事件。 touchend 事件的 target 也是与 touchstart 的 target 一致,即使已经移出了元素。...触摸手势封装相关的框架及事件 手势相关的事件一般就是tap类(屏)和滑动(swipe)事件两类。...5.1 tap类事件 事件,我目前还不知道它和touch的区别,一般用于代替click事件,有tap longTap singleTap doubleTap四种之分。...Zepto.js 是一个轻量级的针对现代高级浏览器的JavaScript库, 它适配了jQuery的大部分api,也就是jQuery怎么用,Zepto.js就怎么用。...移动端点击穿透问题 如果某个返回按钮的位置,恰好在要返回的这个页面的带有href属性的a标签的范围内,在点击返回按钮后,页面快速切换到有a标签的页面,300ms后触发了click事件,从而触发了a标签的意外跳转

6.7K80

前端面试那些坑

写一个通用的事件侦听器函数(机试题)。 ["1", "2", "3"].map(parseInt) 答案是多少? 关于事件,IE与火狐的事件机制有什么区别? 如何阻止冒泡?...谈一下Jquery中的bind(),live(),delegate(),on()的区别? JQuery一个对象可以同时绑定多个事件,这是如何实现的? 是否知道自定义事件。...(阿里) 移动端最小控区域是多大? jQuery 的 slideUp动画 ,如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行,该如何处理呢?...移动端的点击事件的有延迟,时间是多久,为什么会有? 怎么解决这个延时?(click 有 300ms 延迟,为了实现safari的双击事件的设计,浏览器要知道你是不是要双击操作。)...JQuery一个对象可以同时绑定多个事件,这是如何实现的? Node.js的适用场景?

2.1K60

【easeljs】事件汇总

继承自,表示所有继承自那个对象的对象都有这个事件。 定义于,表示只有这个对象才有这个事件。 加入版本,表示从这个版本起才加入这个事件,老版本没有这个事件。...“此对象”表示被添加了这个事件的对象 与jquery和js一致,事件的回调函数第一个参数会带上事件对象,在easeljs文档event类中可以看到各个事件属性的说明。...这是目前唯一非点击的鼠标输入事件。...(如果stage上加了这个事件侦听,当stage上什么元素都没有时,这个是无效的,需要用stagemousemove) pressup 继承自 DisplayObject 加入版本 0.7.0 在此对象上发生了...这个事件一定要启用enableMouseOver。 (jquery也有这样的,但是我忘记jquery中哪个是只离开父对象才触发了。)

91720

【如果你要学JS XIV】—— 移动端常用事件-移动端touch触摸事件

事件touch (也称触摸事件) , Android和IOS都有。...1.触摸事件屏touch事件说明touchstart手指触摸到一个DOM元素时触发touchmove手指在一个DOM元素上滑动时触发touchend手指从一个DOM元素上移开时触发...console.log('我摸够了'); }) 2.事件TouchEvent是一类描述手指在触摸平面 (触摸屏、触摸板等)的状态变化的事件。...这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的加和减少,等等 touchstart、touchmove、 touchend 三个事件都会各自有事件对象。...,所以常用targetTocuhes3.TouchEvent触摸事件对象touches 正在触摸屏幕的所有于指的列衣,targetTouches 正在触摸当前DOM元素的手指列表如果侦听的是一个DOM元素

52200

openwrt外网web管理_OpenAPI

Widget.trigger(event_name [ , …]) 方法的第一个参数是待触发的事件名,也接受任何数量的其他参数。这些参数将被传递到所有的事件侦听器。...由于 () 全局函数是操作浏览器中的全部 HTML,如果你实例化一个部件两次,该函数会搞混两个部件的个内容。...如果widget 被实例化的两次,在应用程序里将有两个相同 id,但却是不同的 HTML元素的情况。而这本身就是一个错误。...event类属性是一个“助手”,协助绑定jQuery事件,它与部件事件无关,部件事件通过on()方法绑定。...第一部分是事件的名称,第二个是jQuery选择器。所以key click.my_button将绑定在所有CSS类名为“my_button”的HTML标签的 click事件上。

6.3K10

jQuery笔记(4)

jQuery事件 目标: 本文由“壹伴编辑器”提供技术支持 单个事件注册: element.事件(function( ){ }) 其他事件基本和原生一致,比如mouseover/mouseout...,如"click"或"keydown" selector: 元素的子元素选择器 fn: 回调函数,即绑定在元素身上的侦听函数 这样就可以同时绑定很多个事件了 :-) 如果想要给两个元素对象都绑定同一件事件...element.triggerHandler()方法可以不触发元素的默认行为 用旧的方法会有默认事件(光标闪烁) 第三种方法: jQuery事件对象 事件被触发,就会有事件对象的产生 element.on...(events, [selector], function(event){ xxx }) 将event打印出来看看: jQuery的其他方法 如果想要把某个对象拷贝(合并)给另外一个对象使用...jQuery插件 图片懒加载

41020
领券