在我们浏览的网站页面中，一般都会有着各种各样的按钮，选中后它们会显示各种各样的效果，那么在js代码中是怎样获取检测网站页面中的按钮是否被按下状态的呢?
假如在网站页面的代码是这样的：
<button id="btn">按钮1</button>
那么要想检测按钮按下，就需要与js代码配合：
纯js实现：
<script type="text/javascript">
document.getElementById("btn").onclick = function () {
//单击事件的处理函数.....
alert("已按下");
}
</script>
以上方法通过HTML DOM中getElementById方法查找id为btn元素来检测单击事件.
方法2.将需要执行的事件封装为函数
<script type="text/javascript">
function btan(){
alert("需要执行的动作");
}
</script>
将新建的函数直接写入html标签的onClick单击事件中.
<button onClick="btan();">按钮2</button>
这样的好处在于无需查找html元素直接执行点击所需要执行的动作函数.
方法3：jquery插件的单击事件，在jquery插件整合的代码使用元素的click方法来检测按钮按下状态。
<script type="text/javascript">
$(function(){
$('#btn').click(function(){
console.log("被点击了1");
});
});
</script>
以上代码仅能够监听1次点击，那么如果是双击该怎样检测呢？
js代码：
<script type="text/javascript">
document.getElementById('btn').ondblclick = function(){
console.log("被点击了2");
}
</script>
jquery代码：
<script type="text/javascript">
$("#btn").dblclick(function(){
//双击后执行的语句
});
</script>
在一些情况下会出现双击按钮的同时也触发了该元素的单击事件的问题，那么该怎么才能去除多余的单击事件呢.
<script type="text/javascript">
var djds = null;
document.getElementById("btn").onclick = function () {
clearTimeout(djds);
djds = setTimeout(function(){
//单击动作
},300);
};
document.getElementById('btn').ondblclick = function(){
// 取消上次未执行的方法
clearTimeout(djds);
//双击动作
};
</script>
通过一个setTimeout定时器与clearTimeout配合，延迟点击事件从而区别单击与双击的动作.
jquery的方法同理:
<script type="text/javascript">
var djds = null;
//定义setTimeout执行方法
$('btn').click(function () {
// 取消上次延时未执行的方法
clearTimeout(djds);
//执行延时
djds = setTimeout(function(){
//单击要执行的语句
},300);
});
$('btn').dblclick(functin () {
clearTimeout(djds);
//双击执行的代码或创建跳转代码
});
</script>
如果我们需要实现按钮只能被点击一次该怎样做?
$('#btn').bind('click', function() {
$(this).unbind('click');//解绑点击事件
});
想实现两次点击分别执行不同动作该怎样做？
在jquery1.9之前的版本我们可以使用toggle方法
如：
$("btn").toggle(function(){
//动作1
},function(){
//动作2
});
在1.9之后的版本没有toggle方法,我们可以这样设置
var nun=0;
$('xxxx').bind("click", function() {
nun++ % 2 ?
(function() { alert("执行的动作1"); }()) :
(function() { alert("执行动作2"); }());
});
利用定义的num变量的数值取余数来判断执行的动作.