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

最新推荐文章于 2024-08-05 20:18:04 发布
最新推荐文章于 2024-08-05 20:18:04 发布
阅读量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小博
关注
专栏目录
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
10-29
先通过一个简单例子测试并发现我说的问题，让你有个直观的印象，再接着看我的解决办法。
长按鼠标滑动实现滚动
WaterSprite_ct的博客
01-16 1450
let isMousedown = false; let mouseStarX = 0; let materialMainContainer = document.getElementById('materialMainContainer'); function mousedown (event) { isMousedown = true; mouseStarX = event....
趣味Python游戏编程：第3章 递归函数的威力：扫雷
最新发布
andyyah晓波的博客
08-05 866
在设计set_flag()函数的具体操作之前，为了保证程序能正常运行，不妨先这样编写代码：上述代码给出了set_flag()函数的定义，但是在函数体内只是执行一个pass语句。提示：其实这是编程的一个小技巧，就是在不确定函数内部细节的情况下，先保证函数形式的完整，使得程序能够正确执行。而pass关键字的作用就是占据位置，虽然什么都没有做，但是能够保证代码整体完整。现在重新运行一下程序，虽然右键单击方块还是没有出现旗子，但是程序也不再报错了。接下来是时候考虑set_flag()函数的具体动作了。
onmousedown和onmouseup事件
datouniao1的博客
08-15 6875
在这个程序中为我们介绍两个鼠标事件onmousedown和onmouseup事件，这个两双鼠标事件分别是鼠标按下 时候触发 的事件和鼠标松开的时候触发 的事件 他r这样来设置文本的颜色们的是实现是通过调用javaScript脚本。我们在这个程序中还可以看到的一点对于文本颜色的一个处理，我们在这个文本颜色的处理的过程是getElementById().style.color
JS实现长按事件功能
热门推荐
qq_44849271的博客
04-17 1万+
长按点击功能主要用到的是onmousedown、onmouseup、setTimeout()、clearTimeout()事件 移动端中则是ontouchstart、ontouchend
鼠标事件：onclick、onmousedown、onmouseup、onmouseover、onmouseout、onmouseenter、onmouseleave、鼠标的按键、 div简单拖拽
JEFF_xieyuzhi的博客
10-06 9976
鼠标事件： onclick：在鼠标左健点击弹起之后触发的事件，即一次完整的鼠标点击过程。过程完成瞬间触发函数。 onmousedown：事件会在鼠标按键被按下时发生。 onmouseup：事件会在松开鼠标按键时触发。 <!DOCTYPE html> <html lang="en"> <head> <meta cha...
鼠标单击和长按事件
m0_66911948的博客
07-31 422
鼠标单击触发事件效果，单击结束触发结束效果。鼠标长按触发不间断的事件效果，长按结束触发结束效果。
onmousedown与onmouseup及onclick事件示例
cristina_song的博客
09-04 3208
onmousedown：用户鼠标按下时触发的事件。 onmouseup:鼠标抬起时触发的事件。 onclick:鼠标点击后触发的事件（包含了两个动作，及按下与抬起两个过程。） 示例1：鼠标按下时更换字体背景色，抬起时还原默认颜色。（onmousedown与onmouseup）<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <titl
onmousedown、onmouseup 以及 onclick事件
weixin_44540155的博客
04-28 2918
onmousedown、onmouseup 以及 onclick 文献种类：专题技术文献； 开发工具与关键技术： VS JavaScript 作者：吴泽锋 撰写时间：2019年4月8日 12、onmousedown、onmouseup 以及 onclick 事件 onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。...
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
10-15
在ondrag指令的bind阶段，可以绑定onmousedown和onmouseup事件，并记录下鼠标按下和松开时的时间戳，计算时间差。如果时间差小于200毫秒，那么就认为是一个点击操作，并设置data-flag为true；如果时间差大于200毫秒...
html中如何使用js实现长按功能.docx
11-22
在这个事件中，我们可以开始计时器，等待用户保持触摸状态一段时间，即实现长按的检测。 2. `touchend`事件：当用户的手指离开屏幕时触发。在这里，我们需要清除计时器，并检查在手指离开前是否已经达到了我们设定...
使用javaScript实现鼠标拖拽事件
11-27
这里的`onmousedown`、`onmouseup`和`onmousemove`属性分别绑定了对应的JavaScript函数，用于处理拖拽事件。 接着，我们需要在JavaScript中定义这些函数： 1. `down()` 函数：当鼠标按钮被按下时，我们需要记录下...
Javascript：onmousemove 、alert 、onmousedown 、onmouseup、onmouseover、onmouseout 用法以及例子
Cosmoshhhyyy的博客
07-05 1730
onmousemove 、alert 、onmousedown 、onmouseup、onmouseover、onmouseout的用法和效果，以及例子代码等。
HTML DOM 事件 —— 鼠标事件 JS鼠标事件
Yxd0724的博客
08-30 7919
onclick、oncontextmenu、ondblclick、onmousedown、onmouseenter、onmouseleave、onmousemove、onmouseover、onmouseout、onmouseup
onmousedown、onmouseup、onclick的区别；
sunlizhen的专栏
06-19 1414
onmousedown：鼠标点击没有抬起发生的事件； onmouseup：鼠标点击后，抬起才发生的事件； onclick：鼠标点击抬起都发生的时候才触发的事件； window.onload = function(){ var oBox = document.getElementById("box"); oBox.onmousedown = function(){
长按事件怎么加定时器
每天都想吃好吃的
11-14 259
事件，然后停止定时器。在这个例子中，我将定时器的时间间隔设置为1秒，你可以根据需要调整。方法中重置了计时器的值，以便在下次按下按钮时重新开始计时。事件，然后启动定时器。当你释放按钮时，会触发。要实现长按事件并加入定时器，你可以结合使用。在上述例子中，当你按住按钮时，会触发。
MacOS获取辅助功能权限控制鼠标点击事件
Cocos2der Game
11-29 6196
昨晚玩一个模拟经营的游戏，由于升级太慢我就不停的种树卖树来换取经验值。不过重复点击10几分钟后，实在受不了。网上本来准备找个鼠标自动点击的软件用用。结果没找到趁手的。如是自己写了个。自己设置需要点击的一组动作，长按（100，200），点击（576，789），点击（750，550）。类似在对应坐标点操作鼠标。原理非常简单，我就不贴代码了，主要说下如何控制鼠标点击事件。注册系统辅助权限，这里会触发用户授
js鼠标事件
m0_57774967的博客
05-06 2551
通过鼠标触发事件, 类似用户的行为: 属性 描述 onclick 当单击鼠标时运行脚本 ondblclick 当双击鼠标时运行脚本 onmousedown 当按下鼠标按钮时运行脚本 onmousemove 当鼠标指针移动时运行脚本 onmouseout 当鼠标指针移..
JavaScript事件
Maaazhi的博客
09-08 2928
JavaScript事件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值