使用“onmousedown”和“onmouseup”实现长按事件

最新推荐文章于 2024-05-21 16:18:08 发布
最新推荐文章于 2024-05-21 16:18:08 发布
阅读量4k 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaohanvk/article/details/75531047
版权

要实现“button”的点击事件不难，“onclick”和“onmousedown”都可以实现。如果要实现事件长按一直执行我选择了“onmousedown”和“onmouseup”来检测鼠标的点击与回弹，并且使用了“setInterval()”和“clearInterval()”方法来运行和停止事件。具体实现代码如下：

1、html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		
		<link rel="stylesheet" type="text/css" href="css/btn.css"/>
		
	</head>

	<body>
		<div id="divbg" class="style-div">
			<input type="text" name="" id="text" value="" />
		</div>
		<input type="button" value="点击" οnmοusedοwn="down()" οnmοuseup="up()" />
		
		<script type="text/javascript" src="js/btn.js" ></script>
	</body>

</html>


2、btn.js 
var divbg = document.getElementById("divbg");
var text = document.getElementById("text");
var i = 0;
var eee;

function down() {
	divbg.style.background = "#999999";
	exet();
	eee = setInterval(function(){
		exet();
	},1000);
}

function up() {
	divbg.style.background = "#008000";
	clearInterval(eee);
}

function exet() {
	i++;
	text.value = i;
}


Z小博
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
onmousedown、onmouseup 以及 onclick事件
weixin_44540155的博客
04-28 2896
onmousedown、onmouseup 以及 onclick 文献种类：专题技术文献； 开发工具与关键技术： VS JavaScript 作者：吴泽锋 撰写时间：2019年4月8日 12、onmousedown、onmouseup 以及 onclick 事件 onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。...
Android触摸事件和mousedown、mouseup、click事件之间的关系
01-06
一、移动端 触摸事件 ontouchstart、ontouchmove、ontouchend、ontouchcancel 1、Touch事件简介 pc上的web页面鼠 标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，但是在移动终端如iphone、ipod Touch、ipad上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel事件，分别对应了触屏开始、拖拽及完成触屏事件和取消。 当按下手指时，触发ontouchstart； 当移动手指时
Extjs鼠标长按事件（实现长按按钮触发事件的方法：mousedown、mouseup）
Kuroko's Development Notes
11-29 3156
实现效果： 注：实现的效果其实就是监听鼠标长按的事件，当鼠标左击长按改变按钮的样式，当鼠标放开之后还原按钮的样式。   实现方法： extjs:   Ext.get("loginBtn").on("mousedown", function () { this.addClass("loginBtnPress"); ...
记录bug以及修复过程-uniapp touchmove使用stop.prevent后touchmove事件失效
qq_65839745的博客
05-21 717
写uniapp的时候用到了ucharts的折线图，这个折线图我是放在component里面作为组件调用的，但是我调用的位置又是在swiper里面，那么问题来了，两个组件都具有横向的touchmove事件，这就需要使用到事件冒泡了，随后进入ucharts内修改源码。然后我就想既然是事件冒泡，那么就是一层层往上走的触发链，我需要保证我下层的盒子可以触发但是上层的盒子不能触发，那么最简单粗暴的就是中间加一层可以拦截该事件的盒子就行了，正好上述文献中提到需要加一个scroll-x的scroll盒子，于是就有了。
js事件之onmousedown和onmouseup
weixin_34365635的博客
05-04 320
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script&gt; function mouseDown() { document.getElementById("p1").style.color="red"; } function mouseUp() { document.getElementById("p1").s
onmousedown和onmouseup事件
datouniao1的博客
08-15 6865
在这个程序中为我们介绍两个鼠标事件onmousedown和onmouseup事件，这个两双鼠标事件分别是鼠标按下 时候触发 的事件和鼠标松开的时候触发 的事件 他r这样来设置文本的颜色们的是实现是通过调用javaScript脚本。我们在这个程序中还可以看到的一点对于文本颜色的一个处理，我们在这个文本颜色的处理的过程是getElementById().style.color
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
10-29
在JavaScript中，`onmousedown`、`onmouseup` 和 `onclick` 是三个常见的鼠标事件，分别对应于鼠标按钮被按下、释放以及单击操作。在同一个元素上同时使用这三个事件可以实现更复杂的交互功能，但同时也可能带来一些...
html中如何使用js实现长按功能.docx
11-22
在这个事件中，我们可以开始计时器，等待用户保持触摸状态一段时间，即实现长按的检测。 2. `touchend`事件：当用户的手指离开屏幕时触发。在这里，我们需要清除计时器，并检查在手指离开前是否已经达到了我们设定...
使用javaScript实现鼠标拖拽事件
11-27
这里的`onmousedown`、`onmouseup`和`onmousemove`属性分别绑定了对应的JavaScript函数，用于处理拖拽事件。 接着，我们需要在JavaScript中定义这些函数： 1. `down()` 函数：当鼠标按钮被按下时，我们需要记录下...
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
11-20
在本例中，标题为“解决VUE自定义拖拽指令时onmouseup与click事件冲突问题”，描述中指出，功能是一个支持上下拖动的悬浮菜单按钮，点击时可以展开或关闭菜单。当用户进行拖拽操作后，如果在松开鼠标时鼠标位置位于...
鼠标事件：onclick、onmousedown、onmouseup、onmouseover、onmouseout、onmouseenter、onmouseleave、鼠标的按键、 div简单拖拽
JEFF_xieyuzhi的博客
10-06 9550
鼠标事件： onclick：在鼠标左健点击弹起之后触发的事件，即一次完整的鼠标点击过程。过程完成瞬间触发函数。 onmousedown：事件会在鼠标按键被按下时发生。 onmouseup：事件会在松开鼠标按键时触发。 <!DOCTYPE html> <html lang="en"> <head> <meta cha...
Javascript：onmousemove 、alert 、onmousedown 、onmouseup、onmouseover、onmouseout 用法以及例子
Cosmoshhhyyy的博客
07-05 1624
onmousemove 、alert 、onmousedown 、onmouseup、onmouseover、onmouseout的用法和效果，以及例子代码等。
onmousedown与onmouseup及onclick事件示例
cristina_song的博客
09-04 3181
onmousedown：用户鼠标按下时触发的事件。 onmouseup:鼠标抬起时触发的事件。 onclick:鼠标点击后触发的事件（包含了两个动作，及按下与抬起两个过程。） 示例1：鼠标按下时更换字体背景色，抬起时还原默认颜色。（onmousedown与onmouseup）<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <titl
JavaScript onmouseup 事件
weixin_30240349的博客
01-10 188
Definition and Usage定义与用法 The onmouseup event occurs when a mouse button is released.当鼠标按键松开时触发onmouseup事件 Syntax语法 onmouseup="所要执行的代码" ...
javascript onmouseup事件
xhqtyq05251109的专栏
08-24 966
This is a headerThis is a paragraph
android鼠标点击事件,Android触摸事件和mousedown、mouseup、click事件之间的关系
weixin_28936835的博客
05-26 893
一、移动端 触摸事件ontouchstart、ontouchmove、ontouchend、ontouchcancel1、Touch事件简介pc上的web页面鼠 标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，但是在移动终端如iphone、ipod Touch、ipad上的web页面触屏时会产生ontouchstart...
JavaScript onmousedown选择元素,onmousemove拖动元素,onmouseup松开鼠标,磁性吸附效果示例
骑着猪猪去拍拖
06-08 5430
JavaScript onmousedown选择元素,onmousemove拖动元素,onmouseup松开鼠标示例,磁性吸附效果 #div1 { width:100px; height:100px; position:absolute; background-color:#7391C5; } #img1 { position:absolute} window.onload = functi
C# 关于OnMouseDown等事件的简单介绍
热门推荐
knqiufan的博客
08-15 1万+
以下对 OnMouseDown等事件进行一些简单介绍。 1、OnMouseDown       当鼠标按键被按下的时候发生。       (1) e.button==1       (2) e.button==2 2、OnMouseUp       当鼠标按键被松开时执行。 3、OnMouseMove       在鼠标指针移动到指定的元素后执行。 4、OnKeyUp
JS中鼠标拖拽div(onmousedown、onmousemove、onmouseup)
Fantasc的博客
08-11 4101
onmousedown：鼠标的按下事件 onmouseove：鼠标的移动事件 onmouseup：鼠标的松开事件 思路： 想实现鼠标拖拽div移动的效果，就得先获取到div，然后给div绑定鼠标按下的事件，在按下事件中绑定移动事件，在移动事件中将鼠标的坐标赋值给div即可实现div随鼠标移动而变换位置，但是只是这样的话，在鼠标松开之后div还是会跟着鼠标动，所以还要绑定鼠标松开的事件。在鼠标的送事件结束后，鼠标的一移动事件和松开事件就不需要在执行，需要执行就得出发鼠标按下事件，在最后得销毁移动和松开事件。
react17 长按事件
最新发布
05-31
React 17 并没有直接提供长按事件的功能，但你可以通过使用原生 DOM 的方式来实现。你可以在 React 组件中添加一个 ref 属性，并将其设置为一个函数，然后在该函数中获取对应的 DOM 元素。接着，你可以在该 DOM 元素上监听 "mousedown" 和 "mouseup" 事件，并使用 setTimeout 函数来实现长按功能。 具体实现如下所示： ```jsx import React, { useRef } from 'react'; function LongPressButton() { const buttonRef = useRef(null); let timer = null; const handleMouseDown = () => { timer = setTimeout(() => { console.log('Long press triggered!'); }, 1000); }; const handleMouseUp = () => { clearTimeout(timer); }; return ( <button ref={buttonRef} onMouseDown={handleMouseDown} onMouseUp={handleMouseUp} > Long Press Button </button> ); } export default LongPressButton; ``` 在上面的代码中，我们使用了 useRef 钩子来创建了一个 buttonRef 引用。在组件渲染时，我们将该引用赋值给了 button 元素。然后，我们在 button 元素上监听了 onMouseDown 和 onMouseUp 事件，并分别触发 handleMouseDown 和 handleMouseUp 函数。在 handleMouseDown 函数中，我们使用 setTimeout 函数来实现长按功能。在 handleMouseUp 函数中，我们清除了定时器，以避免长按事件被错误地触发。 需要注意的是，上面的代码只是一个简单的示例，并没有考虑到一些复杂的情况。例如，在触发长按事件之前，用户可能会拖动鼠标或者取消点击等操作。因此，在实际开发中，你可能需要对代码进行一些修改和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值