Как запустить прослушиватель по нажатию ТОЛЬКО, если предыдущий прослушиватель по нажатию запущен?

Question

Итак, что я хочу сделать sh, так это: у меня есть выпадающий список parent с именем .has-sub > a, он же link. При нажатии link появляется выпадающее меню .dplst. При нажатии любого элемента, кроме link и .dplst, я хочу, чтобы моя функция оповещения всплывала, ОДНАКО, я ТОЛЬКО хочу, чтобы оповещение всплыло ТОЛЬКО ЕСЛИ * link нажата . Так что моя проблема заключается в моем jquery коде. Моя ошибка заключается в том, что при нажатии любых элементов, кроме link и .dplst, и при нажатии link HASN'T щелкает функция оповещения. Но я ТОЛЬКО хочу, чтобы он появлялся при нажатии link. Как мне сделать это с моим текущим кодом? Пожалуйста, помогите мне. Спасибо

РЕДАКТИРОВАТЬ: Таким образом, в основном это результат, который я хочу:

1) Нажмите .has-sub > a

2) .dplst показывает

3 ) щелкните любой элемент, который не имеет класса .alerts и $(".alerts").children()

4) .dplst теперь скрывает

5) всплывающее диалоговое окно с текстом «ok»

Что я хочу ИЗБЕГАТЬ:

1) не делай этого - ПРОПУСТИТЬ

2) не делай этого - ПРОПУСТИТЬ

[Таким образом, по сути, Шаг № 3 теперь становится Шагом 1]

3) щелкните по любому элементу, который не имеет класса .alerts и $(".alerts").children()

4) этого не происходит - Пропустить

[И Шаг № 5 становится Шагом 2]

5) всплывает диалоговое окно с предупреждением с текстом «ok»

$(document).ready(function() {
  $('.flx2 > div > a').click(function(e) {
    $(this).data('clicked', true);
    var checkElement = $(this).next();
    if((checkElement.is('.dplst')) && (!checkElement.is(':visible'))) {
      $('.dplst:visible').slideUp('normal'); 
      checkElement.slideDown('normal');
    }
    if($(this).closest('div').find('.dplst').children().length == 0) { 
      return true; 
    } else { 
      return false; 
    }
  });
});

$(document).ready(function() {
  $(document).mouseup(function(e) {
    if($('.flx2 > div > a').data('clicked')) {
      var dplst = $(".dplst");
      var alerts = $(".alerts").children().addBack();
      if (!dplst.is(e.target) && dplst.has(e.target).length === 0) {
        dplst.hide();
      }
      if (!alerts.is(e.target)) {
        $("button[name='altbut']").click();
      }
    }
  });
});

$(document).ready(function() {
  $("button[name='altbut']").on('click', function(e) {
    alert("ok");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="flx2">
  <div class='has-sub alerts'>
    <a href="">link</a>
    <div class="dplst">
      <a>text1</a>
    </div>
  </div>
</div>
<button name="altbut" type="button"></button>

Answer 1

$(document).ready(function() {
  $('.flx2 > div > a').click(function(e) {
    $(this).data('clicked', true);
    var checkElement = $(this).next();
    if((checkElement.is('.dplst')) && (!checkElement.is(':visible'))) {
      $('.dplst:visible').slideUp('normal'); 
      checkElement.slideDown('normal');
    }
    if($(this).closest('div').find('.dplst').children().length == 0) { 
      return true; 
    } else { 
      return false; 
    }
  });
  
  $(document).mouseup(function(e) {
    if($('.flx2 > div > a').data('clicked')) {
      var dplst = $(".dplst");
      var alerts = $(".alerts").children().addBack();
      if (!dplst.is(e.target) && dplst.has(e.target).length === 0) {
        dplst.hide();
        //set link data click to false
        $('.flx2 > div > a').data('clicked', false)
      }
      if (!alerts.is(e.target)) {
        $("button[name='altbut']").click();
      }
    }
  });
  
  $("button[name='altbut']").on('click', function(e) {
    alert("ok");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="flx2">
  <div class='has-sub alerts'>
    <a href="">link</a>
    <div class="dplst">
      <a>text1</a>
    </div>
  </div>
</div>
<button name="altbut" type="button">button</button>

Не знаю, соответствует ли это совпадению тому, что вы хотите, ваше описание настолько беспорядочное ... Есть несколько вопросов: 1. Если раскрывающийся список был скрыт, вы собираетесь показывать всплывающее окно при нажатии на ссылку? Я добавляю // установление щелчка данных ссылки в false внутри кода.

Answer 2

Хорошо, позвольте мне сначала прояснить ситуацию,

Поэтому необходимо, чтобы всплывающее окно показывало всплывающее окно, когда «ссылка» была нажата хотя бы один раз, а «ссылка» ИЛИ «dplst» не нажата, а нажатие выполнено. on '.flx2'

Если я правильно понял требования, вы можете просто добавить скрытое поле, установить значение 0, а когда щелкнет ссылка, изменить это значение на 1. Затем проверить, не нажали ли на .flx2 и НЕ (ссылка ИЛИ dplst) и проверьте, если скрытое значение равно 1, тогда покажите всплывающее окно, иначе нет.

Вы можете сделать что-то вроде этого:

HTML

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <div class="flx2">
      <div class='has-sub alerts'>
        <a id="link" href="#">link</a>
        <div class="dplst">
          <input type="hidden" id="linkClicked" value="0"/>
          <a>text1</a>
        </div>
      </div>
    </div>
    <button name="altbut" type="button"></button>

Javascript

$(document).ready(function() { 
 $('#link').on('click', function(e) {
   $('#linkClicked').val(1);
  });

   $(".flx2").click(function(e) {
        if($(e.target).is('.dplst') || $(e.target).is('#link')){
            e.preventDefault();
            return;
        }
        else if($('#linkClicked').val() == 1){
            alert("woohoo!");
         }

    }); 

});

Исправлен код выше, также создан скрипка https://jsfiddle.net/63tgLz4u/