JS实现鼠标点击一个按钮不同次数触发不同事件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实现鼠标点击一个按钮不同次数触发不同事件相关的知识，希望对你有一定的参考价值。
使用jQuery的话，相对就比较简单。jQuery有个toggle(fn, fn2, [fn3, fn4, ...])
其中fn,fn2,fn3....为对应的点击次数所执行的事件。
即第一次点击执行fn函数，第二次点击执行fn2函数，依此类推。
当结束最后一此点击的函数后，继续点击将从第一次点击开始。 参考技术A JS实现鼠标点击一个按钮不同次数触发不同事件，什么啊，是用语言实现吗追问
比如说：
现在要实现的是点btn一次执行action，点2次可以由action跳转到其他功能块。。。。
依次推断！
就是这个意思
哦，这个呀，你可以计数实现，点击次数做一个计数器，然后根据计数值执行相应的操作
12 js事件
事件
- js中添加事件的第一种方式：
- 在HTML上直接使用事件属性来添加，属性值为监听执行的函数
- js中的事件只有在当前HTML上有效
- 一个HTML可以添加多个不同的事件
- 一个监听事件可以触发多个函数，不同的函数之间用分号隔开
点击事件
- 单机 onclick
- 双击 ondblclick
鼠标事件
- onmouseover 当鼠标悬停在某个HTML标签上的时候触发
- onmousemove 当鼠标在某个HTML上移动时触发
- onmouseout 当鼠标溢出某个HTML时触发
键盘事件
- onkeyup 当键盘在某个HTML元素上弹起时触发
- onkeydown 当键盘在某个HTML元素上下压时触发
焦点事件
输入框一闪一闪那个竖线就是焦点
- onfoucus 当某个HTML元素获取焦点时触发，持续触发
- onblur 当某个HTML元素失去焦点时触发
值改变事件
- onchange 当值被改变时触发
页面加载事件
- onload 当页面加载成功时触发。用在body标签里
代码
<!DOCTYPE html>
<html>
<head >
<meta charset="utf-8">
<title ></title>
</head>
<body onload="onloadTest()">
<!--
点击事件
单机 onclick
双击 ondblclick
鼠标事件
onmouseover 当鼠标悬停在某个HTML标签上的时候触发
onmousemove 当鼠标在某个HTML上移动时触发
onmouseout 当鼠标溢出某个HTML时触发
键盘事件
onkeyup 当键盘在某个HTML元素上弹起时触发
onkeydown 当键盘在某个HTML元素上下压时触发
焦点事件
输入框一闪一闪那个竖线就是焦点
onfoucus 当某个HTML元素获取焦点时触发
onblur 当某个HTML元素失去焦点时触发
页面加载事件
onload 当页面加载成功时触发
注意：
js中添加事件的第一种方式：
在HTML上直接使用事件属性来添加，属性值为监听执行的函数
js中的事件只有在当前HTML上有效
一个HTML可以添加多个不同的事件
一个监听事件可以触发多个函数，不同的函数之间用分号隔开
-->
<script type="text/javascript">
function onclickTest(){
alert("我是单击事件");
}
function ondblclickTest(){
alert("我是双击事件");
}
function onmouseoverTest(){
alert("我是鼠标悬停事件");
}
function onmousemoveTest(){
alert("我是鼠标移动事件");
}
function onmouseoutTest(){
alert("我是鼠标移出事件");
}
function onkeyupTest(){
alert("我是按键抬起事件");
}
function onkeydownTest(){
alert("我是按键按下事件");
}
function onfocusTest(){
alert("我是获得焦点事件");
}
function onblurTest(){
alert("我是失去焦点事件");
}
function onloadTest(){
alert("我是加载页面事件");
}
//onloadTest()页面加载事件也可以随着js代码的位置加载，通常放在页面底部的js代码中比较多
function onchangeTest(){
alert("我是值改变事件");
}
</script>
<h1>js事件</h1>
<hr>
<!-- 点击事件
单机 onclick
双击 ondblclick -->
<h3>点击事件</h3>
<button type="button" onclick="onclickTest()">单击事件</button>
<button type="button" ondblclick="ondblclickTest()">双击事件</button>
鼠标事件<!--
onmouseover 当鼠标悬停在某个HTML标签上的时候触发
onmousemove 当鼠标在某个HTML上移动时触发
onmouseout 当鼠标溢出某个HTML时触发 -->
<h3>鼠标事件</h3>
<div style="width:190px;height: 190px;border:solid 1px red;"
onmouseover="onmouseoverTest()" onmousemove="onmousemoveTest()"
onmouseout="onmouseoutTest()"></div>
<!-- 键盘事件
onkeyup 当键盘在某个HTML元素上弹起时触发
onkeydown 当键盘在某个HTML元素上下压时触发 -->
<h3>键盘事件</h3>
按键按下：<input onkeydown="onkeydownTest()"/>
按键抬起：<input onkeyup="onkeyupTest()"/>
<!-- 焦点事件
输入框一闪一闪那个竖线就是焦点
onfoucus 当某个HTML元素获取焦点时 持续触发
onblur 当某个HTML元素失去焦点时触发 -->
<h3>焦点事件</h3>
获得焦点：<input onfocusin="onfocusTest()" />
失去焦点：<input onblur="onblurTest()" /><br/>
<!-- 值改变事件
onchange:当标签的value值改变时触发 -->
值改变事件：<select name="school" onchange="onchangeTest()">
<option value ="null">--请选择--</option>
<option value ="白云一中">白云一中</option>
<option value ="白云二中">白云二中</option>
<option value ="白云三中">白云三中</option>
</select>
<!-- 页面加载事件
onload 当页面加载成功时触发 -->
<h3>页面加载事件</h3>
见body标签
</body >
</html>
以上是关于JS实现鼠标点击一个按钮不同次数触发不同事件的主要内容，如果未能解决你的问题，请参考以下文章
如何让一个按钮自动触发,自动执行onclick鼠标单击事件. 默认已点击.
C# winform窗体有个button按钮，我想鼠标点击它不松一直会触发一个事件？是button的哪个事件？