JavaScript：点击事件与长按事件的区别

最新推荐文章于 2025-03-18 19:02:53 发布

代码编织创造

最新推荐文章于 2025-03-18 19:02:53 发布

阅读量615

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/CodeLancerX/article/details/133705115

编程专栏收录该内容

473 篇文章 ¥59.90 ¥99.00

订阅专栏

本文详细介绍了JavaScript中的点击事件和长按事件，包括它们的触发方式、时间差异以及应用场景。点击事件常用于一次性操作，如打开链接或提交表单；而长按事件适用于需要用户保持按下状态的操作，如显示上下文菜单。通过示例代码，展示了如何监听和处理这两种事件，以创建更丰富的交互体验。

点击事件和长按事件是在JavaScript编程中常用的交互方式。虽然它们都可以用于响应用户的操作，但在触发方式、时间和行为上存在一些区别。本文将详细介绍点击事件和长按事件的区别，并提供相应的源代码示例。

点击事件是指在元素上单击鼠标按钮或触摸屏幕时触发的事件。它通常用于执行一次性的操作，如打开链接、提交表单或触发其他特定的行为。以下是一个简单的示例，展示了如何使用JavaScript监听元素的点击事件：

document.getElementById('myButton').addEventListener('click', function(

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

代码编织创造

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

uniapp：仿微信列表长按弹窗菜单

sunluyi的博客

03-21

4006

防微信列表长按弹窗菜单

jQuery实现长按按钮触发事件的方法

10-24

也不宜过短，否则就失去了长按的意义，和一般点击没什么区别。通常情况下，2秒左右是一个合理的长按时间阈值。其次，需要注意跨平台兼容性问题。在不同的设备和浏览器上，长按事件的表现可能会有所不同。为了保证...

参与评论您还未登录，请先登录后发表或查看评论

js单击/双击/三击，长按/单击

wt102的博客

03-08

1107

之前写项目的时候遇到了一个这样的需求，对于页面上的一个元素做单击/长按，触发不同事件，后面考虑到鲁棒性还是换成单击/双击/三击的形式了，不过这些事件之间的区分给人的印象还是深刻的（其实就是卡在这里太久了，乐），写篇文章记录一下。

JavaScript-长按及鼠标事件

火星男孩的分享空间

03-09

1万+

一、判断鼠标左右键：<html> <head> <title>js判断鼠标左、中、右键哪个被点击</title> <script type="text/javascript"> function whichButton(event) { var btnNum = event.button; console.log("eve

javascript使用touch事件 h5实现长按的功能

有一棵树的博客

11-29

1723

javascript使用touch事件 h5实现长按的功能

js 长按事件、点击事件！

vancyf的博客

10-23

8841

html代码 <img class="move" src="./1.jpg"> <div class="movebg"></div> css代码 .move{ display: block; width: 100%; } .movebg{ position: fixed; width: 100%; height: 100%; top: 0;...

JS实现长按事件功能

最新发布

m0_74236534的博客

03-18

441

由于Unity是组件化开发思想，所以自定义按钮也是使用组件Script实现编写自定义事件步骤1.引入自定义事件命名空间（UnityEngine.EventSystems）2.实现自定义事件Interface3.用户交互会触发回调函数点击事件接口系列IPointerEnterHandler:鼠标光标移入射线检测区域，触发回调函数IPointerExitHandler:鼠标光标移出射线检测区域，触发回调函数IPointerDownHandler:鼠标在射线检测区域中按下，触发回调函数。

JS 判断鼠标长按

君子不卿

05-04

626

【代码】JS 判断鼠标长按。

js 如何实现长按事件

QQ_852213985

10-12

1万+

其实也很简单，只要清楚五个方法就行：ontouchstart、ontouchmove、ontouchend、setTimeout、clearTimeout 1、首先在我们按下手指时触发：ontouchstart 2、当我们释放手指时触发：ontouchend 3、如果在按与放之间你没有为其定义事件，那么系统自动认为是onclick事件 4、所以我们要在按与放之间定义一个事件longPress，这里就要用定时器setTimeout 5、但如果在按与放之间有手指有移动，你不能认为它是长按，这应该是用.

JS 中实现鼠标长按连续触发

UserGuan的博客

07-29

2026

【代码】JS 中实现鼠标长按连续触发。

判断是长按还是点击事件

weixin_34005042的博客

02-03

1968

在识别二维码的时候，我们需要判断用户的行为是点击事件还是长按，如果是点击事件不做操作，如果是长按事件，就识别二维码 git地址：https://github.com/wangAlisa/commonDome/blob/master/clickAndlongClick.html ...

swing jbutton实现长按和点击事件

xiaoerbuyu1233的博客

04-13

844

【代码】swing jbutton实现长按和点击事件。

【Unity知识点详解】Button点击事件拓展，单击、双击、长按实现

Backyard Garden Of Games

03-13

6598

根据需求我们要实现点击、双击、长按、长按开始、长按结束事件的回调，所以在代码中我们提供了OnClick、OnDoubleClick、OnPressBegin、OnPress、OnPressEnd回调方法。首先我们来认识一下Selectable这个类，Selectable是所有交互组件的基类，Unity原生的Button组件就是继承了Selectable，我们要拓展Button功能也是对Selectable下的OnPointerDown、OnPointerUp等接口进行重写。

javaScript 长按事件 (移动端)

weixin_69415013的博客

09-08

966

【代码】javaScript 长按事件 (移动端)

vue click是点击事件 鼠标长按事件呢

12-03

Vue.js中并没有直接提供类似于HTML的`<button v-on:click>`这样的鼠标长按事件处理，但你可以通过JavaScript原生的`addEventListener`方法来模拟长按事件。在Vue组件中，你可以这样做： ```html <button @mousedown.prevent="handleMouseDown" @mouseup="handleMouseUp">长按我</button> <script> export default { methods: { handleMouseDown(e) { this.isBeingPressed = true; // 添加定时器来监听持续时间 setTimeout(() => { if (this.isBeingPressed) { this.handleLongPress(); } }, 500); // 可调整持续时间，比如改为200ms表示快速点击而非长按 }, handleMouseUp(e) { this.isBeingPressed = false; }, handleLongPress() { console.log('长按事件触发了'); // 在这里添加你的长按操作逻辑 }, }, } </script> ``` 在这个例子中，我们监听了`mousedown`和`mouseup`事件，并在`mousedown`时设置一个标志表示正在长按。如果用户保持按下状态超过一定时间（这里是500毫秒），`handleLongPress`会被调用。