javascript - 单击函数内部的事件在单击外部触发

Question

我正在使用哈希来检测幻灯片中的当前幻灯片，但我只想在使用上一个或下一个按钮前进幻灯片时才这样做。但是，即使未单击上一个或下一个按钮，也会触发检测幻灯片中的转换的“cycle-after”事件。

如何使该事件仅在点击功能期间运行？

JSFiddle在这里:https://jsfiddle.net/yd8L3enj/4/

$(document).ready(function() {
  var clicked = false;

  $('.controls').on('click', function() {
    $('.cycle-slideshow').on('cycle-after', function(event, optionHash) {
      var hash = window.location.hash;
      $('.clicked').removeClass('clicked')
      if (window.location.hash === hash) {
        $(hash).addClass('clicked')
      } else {
        $(hash).removeClass('clicked')
      }
    });
  });

  $('nav a').on('click', function() {
    clicked = !clicked;
    $('.clicked').removeClass('clicked');
    $(this).addClass('clicked');
    $('.content').addClass('visible');
  });

  $("nav a").mouseenter(function() {
    var href = $(this).attr('href');
    window.location.hash = href
    $('.content').addClass('visible');
  }).mouseleave(function() {
    var current = $('.clicked').attr('href');
    window.location.hash = current
    if ($(".clicked")[0]) {
      // Do something if class exists
    } else {
      $('.content').removeClass('visible');
    }
  });




  $('.close').on('click', function() {
    $('.content').removeClass('visible');
    window.location.hash = ""
    clicked = !clicked;
  });


});

body {
  font-size: 150%;
}

img {
  width: 50vw;
  height: auto;
}

.clicked {
  color: green;
}

.content {
  display: none;
}

.visible {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
<nav>
  <a href="#1" id="1">1</a>
  <a href="#2" id="2">2</a>
  <a href="#3" id="3">3</a>
</nav>
<div class="content">
  <div class="cycle-slideshow" data-cycle-slides="> div" data-cycle-timeout="0" data-cycle-prev=".prev" data-cycle-next=".next" data-cycle-speed="1" data-cycle-fx="fadeOut">
    <div data-cycle-hash="1">
      <img src="https://placeimg.com/640/480/animals">
    </div>
    <div data-cycle-hash="1">
      <img src="https://placeimg.com/640/480/animals/2">
    </div>
    <div data-cycle-hash="2">
      <img src="https://placeimg.com/640/480/arch">
    </div>
    <div data-cycle-hash="2">
      <img src="https://placeimg.com/640/480/arch/2">
    </div>
    <div data-cycle-hash="3">
      <img src="https://placeimg.com/640/480/nature">
    </div>
    <div data-cycle-hash="3">
      <img src="https://placeimg.com/640/480/nature/2">
    </div>
  </div>
  <div class="controls">
    <div class="prev">Prev</div>
    <div class="next">Next</div>
    <div class="close">Close</div>
  </div>
</div>

Answer 1

$(selector).on(... 语法绑定(bind)一个事件监听器。每次执行单击监听器时，您的代码都会向“cycle-after”事件添加一个事件监听器。这意味着，一旦单击一次，此后的所有循环事件都会执行该代码。如果单击多次，您将绑定(bind)多个监听器，甚至更多的监听器将在每个循环后运行事件。

您可能想要做的是，对于一次点击，仅在第一个下一个周期事件之后执行代码。要实现此目的，您可以绑定(bind)监听器，并在回调结束时再次取消绑定(bind)。像这样的事情:

  $('.controls').on('click', function() {
    $('.cycle-slideshow').on('cycle-after', afterCycle);

    function afterCycle(){
      ... your logic here ...
      $('.cycle-slideshow').off('cycle-after', afterCycle);
    }
  });

请记住，这仍然非常脆弱。如果您在第一个 Cycle-After 发生之前单击两次，则库可能只会触发 Cycle-After 一次，并且您仍然会绑定(bind)一个不需要的监听器。如果此幻灯片库支持它，最好在“cycle-after”上简单地绑定(bind)一次，然后添加一个检查，仅当循环是由点击引起时才继续。