jquery on click 功能仅在双击时起作用

Posted 2023-05-08

【中文标题】jquery on click 功能仅在双击时起作用

【英文标题】：jquery on click function work only on double click

【发布时间】：2021-01-28 15:39:22

【问题描述】：

我对 jquery 函数 on.click 有疑问。 我有一个按钮，当我双击它时会打开一个淡入淡出的模式，但是如果我单击它一次，什么也不会发生。我不知道我在哪里做错了。该按钮具有使用 CSS 制作的悬停效果。这种悬停效果是否会干扰按钮点击？

下面我发布我的代码。谢谢

function fadeIn() 
  $(document).ready(function() 
    var button = $(event.relatedTarget);
    $("#tasto1").on('click', function() 
      $("#myModal").fadeIn(600);
    )
  );



// Open the Modal


function openModal() 

  /*document.getElementById("myModal").style.display = "block";*/

  document.querySelectorAll(".seconda_fascia").forEach(function(element) 
    element.style.display = "none";
  );
  document.querySelectorAll(".prima_fascia").forEach(function(element) 
    element.style.display = "inline-block";
  );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="d-flex align-self-end float-right ico_doc btn" onclick="openModal();currentSlide(1);fadeIn();" id="tasto1" type="button">
                      <img class="card-img" src="imgs/SVG/ICO_DOC.svg"  loading="lazy"  id="ICO_DOC2x_mq"></button>

<div class="modal" tabindex="-1" id="myModal" style="background-color:rgba(33, 37, 41, .15)    /*  10% opaque green */ ">
  <div class="modal-dialog modal-dialog-centered modal-xl m">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeModal()">
              <span aria-hidden="true">&times;</span>
            </button>
      </div>
      <div class="modal-body">

        <div class="mySlides" id="prod1">
          <div class="numbertext">1 / 4</div>
          <img src="https://picsum.photos/id/1000/600/300" style="width:100%" >
        </div>

        <div class="mySlides" id="prod2">
          <div class="numbertext">1 / 4</div>
          <img src="https://picsum.photos/id/1050/600/300" style="width:100%" >
        </div>


        <div class="mySlides">
          <div class="numbertext">2 / 4</div>
          <img src="https://picsum.photos/id/600/600/300" style="width:100%" >
        </div>

        <div class="mySlides">
          <div class="numbertext">3 / 4</div>
          <img src="https://picsum.photos/id/87/600/300" style="width:100%" >
        </div>

        <div class="mySlides">
          <div class="numbertext">4 / 4</div>
          <img src="https://picsum.photos/id/18/600/300" style="width:100%" >
        </div>

        <!-- Next/previous controls -->
        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>

        <!-- Caption text -->
        <div class="caption-container">
          <p id="caption"></p>
        </div>

        <!-- Thumbnail image controls striscia di Foto piccole nel MODAL  -->
        <div class="row prima_fascia" style="white-space: nowrap;">

          <div class="col-md-3 m-0 p-0 d-inline-block text-center">
            <img class="demo" src="https://picsum.photos/id/1000/600/300" onclick="currentSlide(1)"  style="width:80%">
          </div>

          <div class="col-lg-3  m-0 p-0 d-inline-block text-center">
            <img class="demo" src="https://picsum.photos/id/1050/600/300" onclick="currentSlide(2)"  style="width:80%">
          </div>

          <div class="col-lg-3  m-0 p-0 d-inline-block text-center">
            <img class="demo" src="https://picsum.photos/id/87/600/300" onclick="currentSlide(3)"  style="width:80%">
          </div>

          <div class="col-lg-3  m-0 p-0 d-inline-block text-center">
            <img class="demo" src="https://picsum.photos/id/18/600/300" onclick="currentSlide(4)"  style="width:80%">
          </div>


        </div>

        <div class="row seconda_fascia " id="demo2">

          <div class="col-lg-3  d-inline-block">
            <img class="demo2" src="https://picsum.photos/id/500/600/300" onclick="currentSlide(5)"  style="width:100%">
          </div>

          <div class="col-lg-3  d-inline-block">
            <img class="demo2" src="https://picsum.photos/id/250/600/300" onclick="currentSlide(6)"  style="width:100%">
          </div>

          <div class="col-lg-3  d-inline-block">
            <img class="demo2" src="https://picsum.photos/id/615/600/300" onclick="currentSlide(7)"  style="width:100%">
          </div>

          <div class="col-lg-3  d-inline-block">
            <img class="demo2" src="https://picsum.photos/id/49/600/300" onclick="currentSlide(8)"  style="width:100%">
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
<script>
</script>

【参考方案1】：

您想要实现的目标不是很清楚，并且您提供的代码不起作用。

我认为问题出在fadeIn 函数中，您在每次迭代时附加一个事件侦听器。此外，在第一次单击时不会执行回调，这似乎是 您描述的问题。

要修复它，您应该将函数更改为：

function fadeIn() 
  $("#myModal").fadeIn(600);

另外，考虑一下来自 JS 的事件绑定，避免 onclick 和类似的结构，更喜欢这样：

$(document).ready(function() 
  $("#tasto1").click(function() 
    openModal();
    currentSlide(1);
    fadeIn();
  );
);

【讨论】：

非常感谢！ :) 你保存了我的工作。我的错误是我不明白如何在一个按钮中传递多个功能。

【参考方案2】：

这是对点击事件的完全错误使用。

<button class="d-flex align-self-end float-right ico_doc btn" onclick="openModal();currentSlide(1);fadeIn();" id="tasto1" type="button">

您有一个按钮，您可以在其中内联调用点击 function function fadeIn() 女巫然后在同一个按钮上设置另一个点击事件......这根本没有意义。

function fadeIn() 
  $(document).ready(function() 
    var button = $(event.relatedTarget);
    $("#tasto1").on('click', function() 
      $("#myModal").fadeIn(600);
    )
  );

你将像以前一样内联进行函数调用

onclick="openModal();currentSlide(1);fadeIn();"

然后在里面做你需要的一切：

function fadeIn() 
      $("#myModal").fadeIn(600);

或者你不会调用它内联并使用 jQuery 设置它：

onclick="openModal();currentSlide(1)"

$("#tasto1").on('click', function() 
  $("#myModal").fadeIn(600);
)

请阅读如何add events