ondblclick 不适用于带有 onclick javascript 的元素答案

【问题标题】：ondblclick won't work on element with onclick javascriptondblclick 不适用于带有 onclick javascript 的元素
【发布时间】：2014-11-29 19:58:57
【问题描述】：

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

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

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

【问题讨论】：

看看这里：stackoverflow.com/questions/6330431/…
你为什么回滚@Scimonster 的正确编辑？没有ondbclick 或elemt。对于您的问题：您可能希望自己检测 dbl-click（使用计时器）：stackoverflow.com/questions/1546040/… 这样您就不会提前触发阻塞 alert()

标签： javascript jquery html

【解决方案1】：

来自MDN：

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

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

【讨论】：

【解决方案2】：

这适用于您要在代码中完成的工作：

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>

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

纯javascript中的基本概念是这样的：

<img class=" center-block" 
       src="http://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 毫秒的延迟时间通常就足够了（150 毫秒通常很短）。

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

【讨论】：