Обход рекурсии .click()

188

06 августа 2018, 04:30

Допустим есть такой код:

<div class="click-block">
    <div class="click">
        <div class="clickone">click me</div>
    </div>
    <div class="clicktwo"></div>
</div>
<script>
$('.click-block .click').on('click',function(){
    $(this).find('.clickone').click();
    $(this).closest('.click-block').find('.clicktwo').click();
});
</script>

И вот из-за того, что "клик" находится в обработчике "клика" в консоли показывается:
too much recursion

Это лечиться? И как?

Answer 1

В данном случае нужно изменить подход, иначе клик в .clickone вызовет .click, который вызовет .clickone, который...
Остановить через e.stopPropagation не выйдет, т. к. если остановить в .clickone, на котором идёт вызов, то до .click события банально не дойдёт.

Максимум - вынести .click за пределы .clickone и остановить всплытие.
Но если кто-то промахнётся - сломается код, поэтому измените структуру html.

$('.clickone').on('click', e => { 
  e.stopPropagation(); 
  console.info('Click on ".clickone"'); 
}); 
$('.clicktwo').on('click', e => { 
  console.info('Click on ".clicktwo"'); 
}); 
$('.click-block .click').on('click', function(e) { 
  $(this).find('.clickone').click(); 
  $(this).closest('.click-block').find('.clicktwo').click(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="click-block"> 
  <div class="click"> 
    Run both 
    <div class="clickone">Evil zone</div> 
  </div> 
   
 
  <div class="clicktwo"></div> 
</div>