jquery 如何区分单击和双击

koaltpgm  于 2023-01-30  发布在  jQuery
关注(0)|答案(2)|浏览(114)

我在我的处理程序中添加了您共享的函数,它看起来像这样:

initMouseHandling:function(){
                    var dragged = null, 
                    _mouseP,
                    selected,
                    nearest = null,
                    show = true,
                    num_console = 0,
                    timeout,
                    clicks,
                    delay = 500;
                                        
                    
var handler =  {

 
   
single_double_click: function (element, clicked, double_click, timeout) {

$(element).observe('click', function (event) {
    ++clicks;
    if (clicks === 1) {
        var timeoutCallback = function (event) {
            if (clicks === 1) {
                clicked.call(this, event);
            } else {
                double_click.call(this, event);
            }
            clicks = 0;
        };
        timeoutCallback.bind(this, event).delay(timeout / 1000);
    }
}.bind(this));
return false;
},

clicked:function(e){
...
},
dragged:function(e){
...
},
dropped:function(e){
...
},
over_edge:function(e){
...
},
over_node:function(e){
...
},
double_click:function(e){
...
}}

canvas.mousemove(handler.over_node);
canvas.mousemove(handler.over_edge);
canvas.mousedown(handler.single_double_click);
//canvas.mousedown(handler.clicked);
//canvas.dblclick(handler.double_click);
}

上面写着:
"未捕获的类型错误:对象[object Object]没有方法'observe'"
不管使用$(canvas)还是$(window),就像我在其他地方看到的那样......
我不知道我是否应该将处理程序作为参数引入,为什么我不能使用"observe",以及对于像我这样的情况,我是否应该这样调用我的处理程序:

clicked.call(this, event);
double_click.call(this, event);

有什么建议吗?

rqcrx0a6

rqcrx0a61#

您研究过jQuery的dblclick吗?

qrjkbowd

qrjkbowd2#

没有jquery函数observe,错误告诉你这一点。为了检测双击,你在第一次点击时启动超时,
在超时时间(200ms)内点击取消,下次点击触发单击或双击:

let timeout;
$("button").on("click", () => {
  if (timeout) {
    clearTimeout(timeout);
    timeout = null;
    alert("double click")
    return;
  }

  timeout = setTimeout(() => {
    alert("single click");
    timeout = null;
  }, 200); // 200ms, try other values for best ux
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click me</button>

相关问题