OndblClick 不会在带有 OnClick JavaScript 的元素上工作

ondblclick won't work on element with onclick javascript

本文关键字：JavaScript 元素 工作 OnClick OndblClick      更新时间：2023-09-26

我有以下问题：我有一个图像。当用户单击它时，它将显示一个警告框，但如果用户双击它，我也想删除它。我有以下标记，但它不起作用。

<h1>hello </h1>
            <img src="smile.png" class=" center-block" onclick="alert('Hello')" ondblclick="$('img').remove();">

唯一有效的部分是警报按钮
注意：jquery 已加载

来自 MDN：

对话框是模式窗口 - 它们阻止用户访问程序界面的其余部分，直到对话框关闭。因此，不应过度使用任何创建对话框（或模式窗口）的函数。

如果您在单击时触发alert()，则 UI 将被禁用，并且您无法在不关闭alert()的情况下立即执行后续点击。（您应该听到警告声音）

这适用于您尝试在代码中完成的任务：

JSFIDDLE 示例：http://jsfiddle.net/larryjoelane/gz4gst49/14/

将下面的代码放在正文文档底部的脚本标签中，您可以如果需要，仍使用警报：

<script>

//the class to click on
var selector = ".center-block";
//set the doubleClicked variable to 0 meaning false
//in this example
var doubleClicked = 0;
//on single click function for selector class
$(selector).on("click",function(){//begin function

//use time out function to delay execution for specified amount
//of time in this case I used 2 seconds
setTimeout(function () {
    //if doubleClicked equals 0
    if (doubleClicked === 0){//begin if then
            //display alert
            alert("hello");
    }//end if then else
    }, 2000);//<--delay set for two seconds
});//end function
//on double click function
$(selector).on("dblclick",function(){//begin function
    //set doubleClicked to 1 
    doubleClicked = 1;
    //remove the img element
    $("img").remove();

});//end function
 </script>

当你想指定元素时不要使用内联 JavaScript，在你的 something 中.js写下：

$('.center-block').dbclick(function(){
  $('img').hide();
});

您可能希望自己检测 dbl 单击（使用计时器）。

纯JavaScript的基本概念是这样的：

<img class=" center-block" 
       src="https://i.stack.imgur.com/pucwG.png" 
   onclick="clearTimeout(this.timer); //catch the second click of dbl-click
            this.timer=setTimeout(function(){ alert('Hello'); }, 250);" 
ondblclick="clearTimeout(this.timer); 
            this.parentNode.removeChild(this);"
>

在这个例子中，我们只是将 timer-id（setTimeout 的返回值）挂接到原始元素。
将无效 ID 传递给 clearTimeout 没有任何效果（也不会引发异常），因此我们甚至不需要检查它是否存在。
250 ms的延迟时间通常就足够了（150ms通常是短路）。

注意：建议使用更高级的方法来挂接事件，而不是像以前那样内联它们。

相关文章：