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

Question

jQuery 的 dblclick 事件无效。当我用 just click 替换 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>

Answer 1

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

$(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>

Answer 2

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

$(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>

Answer 3

Onclick 和 Dblclick 不能作用于相同的按钮。

先触发onclick，屏蔽dblclick

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

dblclick event of jQuery not working in my code

html

javascript

css

jquery

jquery-events