调用 ondblclick 而不调用 onclick-event答案

【问题标题】：Call ondblclick without calling onclick-event调用 ondblclick 而不调用 onclick-event
【发布时间】：2013-09-09 13:45:17
【问题描述】：

有没有一个简单的解决方案，没有 jquery，在 HTML 标记中，可以调用 ondblclick 而不会导致 onclick 也发生？

这总是关闭窗口，尽管它应该只显示警报：

<a href="#" ondblclick="alert('dbl')" onclick="window.close();">X</a>

（它仅适用于 javascript 弹出窗口，因为您无法使用 window.close(); 关闭主窗口）

【问题讨论】：

如果您不需要关闭窗口，请单击返回 false。否则，您需要一个函数来跟踪在执行绑定到它们的函数之前发生了多少次点击
这是最好的主意：stackoverflow.com/questions/1546040/… -- tl;dr - 为单击设置一个较短的超时时间，这样它就不会劫持您的 dblclick
如果不使用超时来捕获单击，这项工作是否有效？因为，我不想仅仅因为这一个按钮就改变整个网站的行为。
别这么想……无论如何，onclick 都会触发
来自 jQuery 文档但相关：“将处理程序绑定到同一元素的 click 和 dblclick 事件是不可取的。触发的事件顺序因浏览器而异，有些会接收两个点击事件在 dblclick 和其他只有一个之前。双击灵敏度（被检测为双击的两次单击之间的最大时间）可能因操作系统和浏览器而异，并且通常是用户可配置的。"

标签： javascript html

【解决方案1】：

我的猜测是，每个解决方案也会存在双击超时长度因用户偏好而异的问题，该问题由 Irvin Dominin aka Edward 在上面的评论中描述：

来自 jQuery docs 但相关：“不建议将处理程序绑定到同一个元素的 click 和 dblclick 事件。序列触发的事件因浏览器而异，其中一些在 dblclick 之前接收两个点击事件，其他只接收一个。双击灵敏度（检测到的两次点击之间的最长时间双击）可能因操作系统和浏览器而异，并且是通常是用户可配置的。”

我放弃使用双击并改用 CTRL+单击：

<a href="#" onclick="if(event.ctrlKey) { 
 alert('CTRL+Mouseclick'); return false; 
} else { window.close(); }">X</a>

见：

Catch onclick-event with CTRL pressed

【讨论】：

【解决方案2】：

我用下面的代码解决了这个问题，

<a id="press" href="javascript:void(0)" onclick="singleClick(event)"
    ondblclick="doubleClick(event)">Click here</a>

<div id="log"></div>

我的 JavaScript 将是，

    var timer;
    var status = 1;

    function singleClick(event) {
        status = 1;
        timer = setTimeout(function() {
            if (status == 1) {
                document.getElementById("log").innerHTML ='I  am single click !';
            }
        }, 500);

    }

    function doubleClick(event) {
        clearTimeout(timer);
        status = 0;
        document.getElementById("log").innerHTML = 'I  am a double  click!';
    }

请让我知道状态。希望这会有所帮助。

【讨论】：

我的猜测是，您的解决方案也会存在双击超时长度因用户偏好而异的问题，该问题由上述评论中的 Irvin Dominin aka Edward 描述。我放弃了使用双击并改用 CTRL+单击
我已经在我的项目中成功实现了这一点，并且没有任何问题。 DbClick 必须让我有点快。如果你留下一些空白，通常它被认为是两次单击。

【解决方案3】：

我认为这是一种难以处理的情况，您可以使用超时，但您不能确定正确的行为。

在 jQuery（但也有 vanilla）文档中有一个重要说明，告诉我们要避免处理单击和双击：

不建议将处理程序同时绑定到 click 和 dblclick 相同元素的事件。触发的事件顺序各不相同从浏览器到浏览器，其中一些之前接收到两个点击事件 dblclick 和其他只有一个。双击灵敏度（最大被检测为双击的两次点击之间的时间）可能因操作系统和浏览器，并且通常是用户可配置的。

简而言之：

如果您可以使用单个处理程序重构您的 UI
也可以按照here 的建议使用超时，但不会防弹

【讨论】：

【解决方案4】：

JS：

var single;

HTML：

<a href="#" 
  ondblclick="single=0; alert('dbl')" 
  onclick="single=1; setTimeout(function(){
    if (single) window.close();
  },300);">X</a>

【讨论】：

这看起来，好像它会工作。您在此处添加超时，然后检查单击是否保持单次
只剩下一小部分用户习惯了很长的双击时间，比这里定义的 300 毫秒还要长

【解决方案5】：

从您的代码看来，您似乎希望两者都根据点击次数工作，那么最好在点击之间引入短暂的超时并相应地运行相应的功能。你可以看看here。

【讨论】：

【解决方案6】：

我知道这不是你想为你的问题做的，但这里有一种方法可以轻松地使用单击和双击：

如果您需要通过点击选择一个对象（或保存一个变量），您可以使用 javascript 在“href”中调用一个函数。

然后就可以使用“ondblclik()”直接编辑注册表，无需点击编辑按钮。

“href”中的函数总是被执行，所以不要用“alert()”测试它，你不会得到双击，因为消息窗口会打开。它运行 2 次，然后执行可能有问题的操作，但不保存或更新变量。

function clickMe(c){
  var link = document.getElementById('link');
  link.innerHTML = "Clicked: "+c;
}

&lt;a id="link" href="javascript:clickMe(1);void(0);" ondblclick="clickMe(2);"&gt;Click Me&lt;/a&gt;

【讨论】：