搜 索

jquery实现一些单击事件与双击事件之间的各种方法

编辑:QTOOL.NET日期:2019-03-1179

首先,我们可以先了解一下jquery的单击事件,jquery可以使用元素的click方法来执行操作。
如:
$(function(){
$('#XXXX').click(function(){//ID为XXXX的元素点击时
  //单击之后,要执行的语句
    });
});
jquery双击事件,即在很短的时间内点击两次的事件,方法是dblclick()
如:
$("XXXX").dblclick(function(){
 //双击之后,要执行的语句
});
 
那么在一些情况下,有时候会出现双击事件同时也触发同一元素的单击事件问题,怎么才能消除掉多余的一次单击事件.
代码如下:
 
var jsnum = null;
 //定义setTimeout执行方法
$('xxxx').click(function () {
    // 取消上次延时未执行的方法
    clearTimeout(jsnum);
    //执行延时
    jsnum = setTimeout(function(){
        //单击要执行的语句
    },300);
});
 
$('xxxx').dblclick(functin () {
    // 取消上次延时未执行的方法
    clearTimeout(jsnum);
    //双击执行的代码
});
 
如果我们想要实现按钮只能够点击一次,点击一次后就取消点击绑定的方法呢?
代码如下
 
$('#xxxx').bind('click', function() {
    $(this).unbind('click');//解绑点击事件
});
 
那么,jquery如果想实现单纯的两次点击以及两次不同响应呢
在jquery1.9之前的版本我们可以使用toggle方法
$("xxxx").toggle(function(){  
//事件1 
},function(){  
  //事件2
});  
但是在1.9以上版本就没有toggle方法了,我们可以这样设置
var nun=0;  
$('xxxx').bind("click", function() {  
    nun++ % 2 ?   
        (function() { alert("事件1"); }()) :  
        (function() { alert("事件2"); }());   
});  
以上就是在线工具分享的关于jquery中,常见的几种点击方式以及使用方法.

TAG标签:jsjQuery
此文章由QTOOL.NET编辑
最新文章

热门标签