Question

我有这个代码，可以在第一次点击并第二次解决时阻止点击事件。但是，如果我点击第2项并返回第1项，则不会阻止点击事件。如果我点击一个项目，我希望它重新开始。

JS

   $('.dropdown').each(function () {

        $(this).find('a').on('click.menuClick', function (e) {

            e.preventDefault();

            $(this).parent().addClass('dropDownClass');
            $(this).off("click.menuClick");

        });
    });

HTML

<ul class="dropdown">
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
</ul>

这是一个小提琴 https://jsfiddle.net/gt1zhcyc/4/

Answer 1

有一个非常简单的逻辑：不是依靠.on()和.off()绑定/取消绑定自定义命名空间的点击事件，您可以使用.on() +存储单击.data()对象中的锚元素的状态。

我们假设我们在元素中使用hasClicked的键存储您点击的状态。单击<a>元素后，只需检查.data('hasClicked')是否为假：当未定义时，它将评估为false，或者已设置为false。如果它是假的，你可以将它设置为true，它存储的状态是＆＃34;嘿，我之前点击了一次！＆＃34;。在这里，您还可以重置其兄弟姐妹的点击状态：

if (!$(this).data('hasClicked')) {
  // Store state
  $(this).data('hasClicked', true);

  // Remove clicked state other anchor elements that is not self
  $(this).closest('.dropdown').find('a')
    .not(this)
    .data('hasClicked', false);

  // ...
} else {
  // Clicked the second time, we reset the clicked state
  $(this).data('hasClicked', false);

  // ...
}

您想要提出的第二个技巧是点击这些元素外部以重置点击状态。您可以简单地依赖事件冒泡：当从链接触发单击事件时，您可以阻止它传播到文档。同时，在文档对象上设置一个相同的侦听器以捕获click事件（必须在anchor元素外部发出）。捕获此事件时，您将所有单击的状态强制重置为false：

$(document).on('click.menuClick', function(e) {
    $('.dropdown a').data('hasClicked', false);
});

下面的逻辑通过结合两个逻辑包含上述答案：

＆＃13;

$(function() {
  // Listen to click event on <a>
  $('.dropdown a').on('click.menuClick', function(e) {

    // TODO: Remove this, only for testing
    e.preventDefault();

    // Prevent click event from bubbling
    e.stopPropagation();

    // Check if element has been clicked before
    // If never clicked before, we prevent action and store state
    if (!$(this).data('hasClicked')) {
      // Store state
      $(this).data('hasClicked', true);
      $(this).addClass('hasClicked');
      console.log('Clicked the first time');
      
      // Remove clicked state other anchor elements that is not self
      $(this).closest('.dropdown').find('a')
        .not(this)
        .data('hasClicked', false)
        .removeClass('hasClicked');
    } else {
      $(this).data('hasClicked', false).removeClass('hasClicked');
      console.log('Second clikc, already clicked once');
    }

  });

  // Listen to bubbling click event on document
  $(document).on('click.menuClick', function(e) {
    $('.dropdown a').data('hasClicked', false).removeClass('hasClicked');
    console.log('Click detected outside, resetting hasClicked state');
  });

});

＆＃13;

.hasClicked {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown">
  <li><a href="google.com">item 1</a></li>
  <li><a href="yahoo.com">item 2</a></li>
</ul>

＆＃13;

点击后重新触发事件

1 个答案: