文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

单击(‘click tap')和.on('click || tap')有什么不同？

单击（'click tap'）和.on（'click || tap'）是两种常见的前端开发中处理点击事件的方式。

单击（'click tap'）是指通过在HTML元素上添加onclick属性来触发点击事件。例如，可以在一个按钮上添加onclick属性，并指定一个JavaScript函数来处理点击事件。这种方式适用于简单的点击操作，但不适用于移动设备上的触摸操作。

.on（'click || tap'）是指使用JavaScript库（如jQuery）提供的事件绑定方法来处理点击事件。通过使用.on（'click'）方法，可以将点击事件绑定到一个或多个HTML元素上，并指定一个JavaScript函数来处理点击事件。这种方式可以处理点击和触摸事件，因此在移动设备上更加灵活和可靠。

总结：

  • 单击（'click tap'）是通过在HTML元素上添加onclick属性来触发点击事件。
  • .on（'click || tap'）是使用JavaScript库提供的事件绑定方法来处理点击事件，适用于移动设备上的触摸操作。

腾讯云相关产品和产品介绍链接地址：

相关搜索:jQuery上的trigger('click')和click()之间有什么区别？在"keyup change keypress click tap“中的JQuery未在iPhone上触发(IoS)为什么.click()和on (“单击”)在引导折叠按钮上表现不同？Selenium - click和clickAndWait有什么区别？为什么不使用click参数(Spring boot和vaadin)click()和dispatchEvent都不会触发reactjs中的自动单击当未单击任何节点时，Treeview .Click和.MouseClick事件不会触发在form_load和button_click中调用函数有什么区别吗？这个在VueJS中不工作的Click事件有什么问题吗？ViewActions.click()和只执行view.performClick()的自定义ViewAction之间有什么区别？OpenID和SAML有什么不同？网站和网址有什么不同JsonObject和JSONObject有什么不同setupFiles和setupTestFrameworkScriptFile有什么不同asynctreenode和treenode有什么不同？MockBackend和HttpTestingController有什么不同？IWindsorContainer和IUnityContainer有什么不同？RBuilder和RDomBuilder有什么不同？XPath和JXPath有什么不同？linkWithCredential和linkWithPopup有什么不同
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

移动端web开发，click touch tap区别

移动端用tap时会有穿透问题 一：click与tap比较 click与tap都会触发点击事件，但是在手机web端，click会有200-300ms的延迟，所以一般用tap代替click作为点击事件。...singleTap 和doubleTap分别代表单次点击和双次点击 二：tap的穿透处理 使用zepto框架的tap的点击事件，来规避click事件的延迟响应，会出现穿透，即点击会触发非当前层的点击事件...三：穿透原因 问题：在HTML5点击了q以后，弹出b的弹框 因为tap事件是通过document绑定了touchstart和touchend事件实现，$('.q')上，当touchend事件冒泡到document...事件（注意不再是绑定zepto的tap事件）即可。...也可以不在body上初始化它，而在某个dom上初始化，这样，只有设个dom和它的子元素才能享受"无延迟"的点击 实践开发中，当元素绑定fastclick后，click响应速度比tap还要快一点。

2.2K100

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

事件在移动端，代替 click 作为点击事件，tap 事件被很多框架（如 zepto）封装，来减少这延迟问题， tap 事件不是原生的，所以是封装的，那么具体是如何实现的呢？...(btn, function() { alert('taped'); }); 拓展： 点透问题 如果我们在移动端所有的 click 都替换为了 tap 事件，还是会触发点透问题的...，因为实质是： 在同一个 z 轴上，z-index 不同的两个元素，上面的元素是一个绑定了 tap 事件的，下面是一个 a 标签，一旦 tap 触发，这个元素就会 display: none，而从上面的...tap 可以看出，有 touchstart、touchend，所以会 300ms 之后触发 click 事件，而 z-index 已经消失了，所以，触发了下面的 a 的 click 事件，注意： 我们认为...a 标签默认是绑定了 click 事件的。

6.2K40

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

    移动端click事件300ms的延迟现象的原因： 在最早iphone的safar浏览器中，为了实现触屏中双击放大效果，当用户点击屏幕时后会判断在300ms内是否有第二次点击，如果有，就理解成双击，若没有就是单击...解决延迟的思路： touchstart touchend是没有延迟的，可以在touchend时触发用户想要在click时触发的事件. zepto 解决click延迟的原理： 自定义tap事件，当用户点击元素时...tap事件，触发时遮罩层消失，该标签正下方有一个绑定了click的按钮，此时点击上层的标签，同时也会触发下层元素的click事件，出现穿透的现象。...为什么会出现穿透： 结合前面tap事件的原理来分析： 当触发tap事件，上层遮罩层关闭后，此时事件只进行到touchend，而click是在大概300ms后才触发，当click触发时，上面的遮罩层已消失...下层什么样的元素才会形成穿透： 根据原理来说，因为穿透是发生在click发生时，也就是下层绑定了click事件或click时会触发的事件（focus focusout）的元素，或点击时有默认形为的标签元素

    1.3K10

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

    touchmove事件和鼠标的mousemove事件一样都会多次重复调用，所以，事件处理时不能有太多耗时操作。不同的设备，移动同样的距离 touchmove 事件的触发频率是不同的。...有几种可能的原因如下(具体的原因根据不同的设备和浏览器有所不同): 由于某个事件取消了触摸：例如触摸过程被一个模态的弹出框打断。...return this; } }, /*单击事件： * 为了规避click的300ms的延迟，自定义一个单击事件...触摸手势封装相关的框架及事件 手势相关的事件一般就是tap类（触屏）和滑动（swipe)事件两类。...5.1 tap类事件 触碰事件，我目前还不知道它和touch的区别，一般用于代替click事件，有tap longTap singleTap doubleTap四种之分。

    6.4K70

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

    touchmove事件和鼠标的mousemove事件一样都会多次重复调用，所以，事件处理时不能有太多耗时操作。不同的设备，移动同样的距离 touchmove 事件的触发频率是不同的。...有几种可能的原因如下(具体的原因根据不同的设备和浏览器有所不同): 由于某个事件取消了触摸：例如触摸过程被一个模态的弹出框打断。...return this; } }, /*单击事件： * 为了规避click的300ms的延迟，自定义一个单击事件...触摸手势封装相关的框架及事件 手势相关的事件一般就是tap类（触屏）和滑动（swipe)事件两类。...5.1 tap类事件 触碰事件，我目前还不知道它和touch的区别，一般用于代替click事件，有tap longTap singleTap doubleTap四种之分。

    6.8K80

    【移动端】touch事件及穿透事件

    www.bugshouji.com touch 事件的来历 2007 苹果推出iphone，浏览器网页在iphone上显示时字体特别小，根本看不清楚 苹果的解决方案： 方案一：双指进行缩放 方案二：在屏幕上双击进行放大（单击...300ms后，再单击才算双击），造成了，移动端点击事件，300ms 延迟的问题 解决方案，就是使用touch事件来替代 移动端新增touch事件 --- 只能使用现代事件进行添加 touchstart...: 触摸开始 touchmove: 触摸移动 touchend: 触摸结束 touchcancel：touch 取消，如来电等 【扩展】：移动端touch、click、tap的区别 http:...是在touch系列事件发生后300ms才触发的，混用click和touch肯定会导致穿透问题....2) 跨页面点击穿透问题 如果按钮下面恰好是一个href属性的a标签，那么页面就会发生跳转（a标签跳转默认是click事件触发的） 解决问题： 方法一：自己封装tap事件不会有穿透问题，因为阻止了默认行为

    2K10

    移动端项目经验 JavaScript

    移动端click时间300ms延迟 在移动端，click点击事件会造成300ms的延迟，造成这种延迟的原因在于：当用户一次点击屏幕之后，浏览器并不能立刻判断用户是要进行双击缩放，还是想要进行单击操作。...对于这种体验不佳的问题，我们可以使用tap等事件来替代，而tap事件属于模拟类事件，需要引入zepto.js或者百度的touch.js等插件辅助实现。...也可以通过使用fastclick.js来解决click的延迟（这个不是使用tap事件去替代）。...解决办法很简单：-webkit-tap-highlight-color:rgba(255,255,255,0) 可以同时屏蔽 iOS和安卓点击元素时出现的阴影。...解决办法有两种，与其说解决办法倒不如说是权宜之计，一种是干脆不兼容低端手机（当前也是现实的，只要这种手机在市场份额当中占比很少，其实是可以忽略的，就如同当前PC端的兼容，基本都是做到IE8或IE9以上，

    1.4K80

    『App自动化测试之Appium应用篇』| uiautomator + accessibility_id定位方法完全使用攻略

    uiautomatorviewer.jar2属于同一个文件只是页面功能略有不同，一次只可使用一个，不管下载那个最后必须重命名为uiautomatorviewer.jar；进入SDK目录的D:\android-sdk-windows...我们之前提供了很多的定位方式，但是有时候需要用坐标才能定位到；但是使用坐标定位很不稳定，它和手机的分辨率、屏幕尺寸等有关系；这样同一套代码可能在不同的机器上运行不下去，需要投入大量的人力进行代码修改优化...5 bounds坐标定位方式bounds坐标定位方式为：driver.tap()这个tap()使用如下： def tap(self, positions: List[Tuple[int, int]...7 UiSelector对象APIUiSelector对象可以参考：UiSelector；关于UiSelector对象API有以下内容：API说明 checked(boolean val)设置搜索条件以匹配当前选中的小部件...以通过布局层次结构中的节点索引匹配小部件 instance(int instance)设置搜索条件以按小部件的实例号匹配小部件longClickable(boolean val)设置搜索条件以匹配可长时间单击的小部件

    60720

    Vue移动端 Web App 点击穿透问题解决方案

    页面当中使用了 iScroll 来实现页面局部滚动，在 iScroll 的配置当中把 tap 和 click 事件都开启了。...2021/11/aHR0cDovL2R4ZWwuY24vd3AtY29udGVudC91cGxvYWRzLzIwMjAvMDUvMmYwMzIzZmE2YWQwMjBkLmdpZg-2-1.jpg 原因 什么是点击穿透...假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart事件上注册了一个回调函数，该回调函数的作用是隐藏B元素。...通过上网查找有关资料，翻阅了移动端的书籍，发现在手机端中，事件的触发顺序为：touchstart -> touchmove -> touchend，而 click 事件有 300ms 的延迟，当 touchstart...浏览器在 touchend 后会等待约300ms，原因是判断用户是否有双击（double tap）行为。如果没有 tap 行为，则触发 click 事件，而双击过程中就不适合触发 click 事件了。

    1.7K30

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

    前端的很多事件在PC端和浏览器端可公用，但有些事件却只在移动端产生，如触摸相关的事件 本文整理了移动端常见的一些事件，包括原生支持的click、touch、tap、swipe事件，也有定义型的gesture...手势事件（目前只是一个概念，使用的时候需封装模拟） 使用到的是移动端的Chrome浏览器，本文只对该浏览器进行调试，其他浏览器暂未考虑到 一、事件定义及分类 1. click事件 单击事件，类似于PC端的...click，但在移动端中，连续click的触发有200ms ~ 300ms的延迟 2. touch类事件 触摸事件，有touchstart touchmove touchend touchcancel...类事件 触碰事件，我目前还不知道它和touch的区别，一般用于代替click事件，有tap longTap singleTap doubleTap四种之分 tap: 手指碰一下屏幕会触发 longTap...2) 查看触发的事件对象 简单地修改，将事件监听中第三个参数置为true，输出完整的事件对象 addEvent(one, 'tap click touchstart touchmove touchend

    2.1K20

    点击穿透原理及解决

    一、事件触发顺序 PC网页上的大部分操作都是用鼠标的，即响应的是鼠标事件，包括mousedown、mouseup、mousemove和click事件。...二、点击穿透场景及原因 有了以上的基础，我们就可以理解为什么会出现点击穿透现象了。我们经常会看到“弹窗/浮层”这种东西，我做个了个demo。 ?...整个容器里有一个底层元素的div，和一个弹出层div，为了让弹出层有模态框的效果，我又加了一个遮罩层。...'#underLayer').on('click', function(){ alert('underLayer clicked'); }); 点击关闭按钮，touchend首先触发tap，弹出层和遮罩就被隐藏了...如果要求不高，不在乎滑走或者滑进来触发事件的话，span + touchend就可以了，毕竟tap需要引入第三方库 不用a标签其实没什么，移动app开发不用考虑SEO，即便用了a标签，一般也会去掉所有默认样式

    4.2K104

    移动端问题收集和解决

    tap击穿问题 问题描述 绑定tap方法的dom元素，触发该方法时，该dom元素下方同一位置的dom元素会触发click事件或者有浏览器认为可以被点击交互的dom元素（input的focus事件）...移动端300ms延迟原因 2、zepto的tap事件是绑定在document.body上的，tap事件执行（冒泡之后）之前，click事件已经被”执行”，只是被延迟了而已，所以在tap事件用preventDefault...也没用 解决方案 1、上下元素使用同样的事件，同样适用tap或者click事件 2、使用fastclick库，会把click的300ms延迟干掉 3、自己封装tap事件，使用touchstart、touchend...手机端和移动端不同处理 if (isMobile()) { $(ele).on('tuochstart', function(event) { event.preventDefault...length也不同，跟unicode编码有关。

    1.9K20

    换个姿势「模拟登录」

    今天老肥给大家介绍Python一个非常有意思的库PyUserInput，它集成了PyMouse和PyKeyboard这俩模块，能够模拟鼠标和键盘的操作，可以说是轻量级的按键精灵。...模块安装 不同的操作系统需要安装不同的依赖： Linux - Xlib Mac - Quartz,AppKit Windows - pywin32,pyHook 在Windows系统中，pywin32...(100, 100, 1, 1) # 在(100, 100)的位置单击左键一次 在click方法中，前两个参数为位置的坐标，第三个参数为按键选项，1表示鼠标左键，2表示右键，而最后一个参数表示点击的次数...#点击S键 另外还可以有组合按键，比如最常用的复制Ctrl+C。...) time.sleep(1) m.move(1000,500) time.sleep(2) # 点击登录按钮 m.click(590,600) 整个登录过程行云流水，有下图为证。

    1.4K10

    移动浏览器点击事件的问题

    利用jquery这样写的话，也可以，但是当你点击按钮的单击事件时，将 会等待大约300ms的时间。这是因为，浏览器是等着看，如果你是真正执 行双击。...如下代码所示,就会延时300ms： $("#sid").click(function(){ console.log(111); }); ps:在移动浏览器端，你会发现，当你点击某个区域的点击事件时...，你会 发现，边框周围有个阴影一闪而过，如何解决？...介绍下按键： press，release，single tap，double tap，triple tap press就是按么， release就是松开， single tap...解决方案：（3）点击和滑动之间有一个本质的区别就是 touchmove（mousemove），在手机端，只需要判定是否触发这一点即可： var flag = false; var $selector

    82230

    移动端app开发问题及理解

    h5+vue+vant3（ui框架）+webpack+Nginx vant官网地址 https://vant-contrib.gitee.io/vant/#/zh-CN/ 移动端跟web端事件有点不同...web端事件有 onload 页面中所有标签，文档，图片等资源加载完毕后触发 onclick 鼠标单击事件 ondbclick 鼠标双击事件 onmousedown 鼠标按下 onmouseup...click 单击事件 类似于pc端click，移动端中，连续click触发有200ms-300ms的延迟 touch 触摸类事件 touchstart 手指触摸到屏幕触发 touchmove...一般用于代替click事件 tap 手指碰一下屏幕触发 longTap 手指长按屏幕触发 singleTap 手指碰一下屏幕触发 doubleTap 手指双击屏幕触发 swip滑动类事件...本项目消息推送跟设备走 消息推送测试的逻辑： 首先分组长和组员两个成员身份，组长有分配维修单的权限。

    3.8K10
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券