jQuery的dblclick事件在我的代码中不起作用

编程问答 2022-08-12

问题描述

jQuery的dblclick事件不起作用。当我用dclick替换dblclick时，它的工作就很好了。我不明白问题所在。

<html>
<head>
    <title>jQuery Selectors</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h2 class="first" id="firstH2">Selectors up jQuery-2</h2>
    <p>Paragraph free of any division</p>
    <div class="mydivs" id="firstdiv">
        <p>This is 1st para in 1st div</p>
        <p>This is 2nd para in 1st div</p>
    </div>
    <div class="mydivs" id="seconddiv">
        <p>This is 3rd para in 2nd div</p>
    </div>
    <button onclick="fn1()" id="btn1">Click Me</button>
    <button id="btn2" onclick="fn1()">Click Me 2</button>
</body>
<script src="js/jquery.js" type="text/javascript"></script>
<script>
    $(document).ready(function(){
        $("#btn1").dblclick(fn1);
        function fn1(){
            $("#firstdiv").fadetoggle();
        }
        $("#btn2").dblclick(function(){
            $("#seconddiv").fadetoggle();
        });
    });
</script>

解决方法

无需编写内联单击事件，也无需添加单独的功能。检查下面的更新片段... 

$(document).ready(function(){
    $("#btn1").dblclick(function(){
      $("#firstdiv").fadeToggle();
    });
    $("#btn2").dblclick(function(){
        $("#seconddiv").fadeToggle();
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 class="first" id="firstH2">Selectors up jQuery-2</h2>
<p>Paragraph free of any division</p>
<div class="mydivs" id="firstdiv">
    <p>This is 1st para in 1st div</p>
    <p>This is 2nd para in 1st div</p>
</div>
<div class="mydivs" id="seconddiv">
    <p>This is 3rd para in 2nd div</p>
</div>
<button id="btn1">Click Me</button>
<button id="btn2">Click Me 2</button>

,

从标记中删除点击处理程序，而仅使用事件处理程序代码。

$(function() {
  function fn1(event) {
    $("#firstdiv").fadeToggle();
  }
  $("#btn1").on('dblclick',fn1);

  $("#btn2").dblclick(function() {
    $("#seconddiv").fadeToggle();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 class="first" id="firstH2">Selectors up jQuery-2</h2>
<p>Paragraph free of any division</p>
<div class="mydivs" id="firstdiv">
  <p>This is 1st para in 1st div</p>
  <p>This is 2nd para in 1st div</p>
</div>
<div class="mydivs" id="seconddiv">
  <p>This is 3rd para in 2nd div</p>
</div>
<button id="btn1">Click Me</button>
<button id="btn2">Click Me 2</button>

,

Onclick和Dbclick不能在同一按钮上使用。

首先触发Onclick，然后阻止dbclick

htmljavascriptjqueryjquery-events