Плохо ли иметь вложенные обработчики кликов?

Question

Кто-то упомянул об этом один раз, но я никогда не нашел документацию для поддержки претензии. Плохо ли иметь вложенные обработчики кликов в приложении? Например:

$("div").on("click", function(){ 
    //*Do things* 
    $("p").on("click", function(){ 
     //*Do things* 
    }) 
}) 

Если это плохая практика, почему, и что было бы лучшим решением?

Answer 1

Да, это вообще плохо, если это именно то, что вы хотите?

Если кто-то нажимает на DIV дважды, обработчик события для пункта прилагается два раза, делая «вещи» в два раза, попробуйте

$('div').on('click', function() { 
 
    $('p').on('click', function() { 
 
    alert('This is annoyning'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>click me a few times ?</div> 
 
<br /><br /><br /> 
 
<p>... then click me</p>

---

Лучшим решением было бы просто не в гнездо обработчиков событий

var isClicked = false; 

$('div').on('click', function() { 
    isClicked = true; 
}); 

$('p').on('click', function() { 
    if (isClicked) // do stuff 
}); 

(упрощено, чтобы показать концепцию, не использовать глобальные переменные, jQuery имеет data())

Answer 2

Да, это плохая практика. Причина заключается в нескольких щелчках по результатам div, когда у вас есть несколько событий, добавленных в другой элемент. Дважды щелкните снаружи, и в тег абзаца добавятся два клика.

Если вы действительно хотите, чтобы клики были добавлены так, вам нужно отменить любое уже добавленное событие.

$("div").on("click", function(){ 
    //*Do things* 
    $("p").off("click.myNameSpace").on("click.myNameSpace", function(){ 
     //*Do things* 
    }) 
}); 

Другой вариант - добавить события и поместить логику внутри щелчка, чтобы увидеть, должна ли она запускаться.

(function() { 
    var isActive = false; 
    $("div").on("click", function(){ 
     isActive = false; 
    }); 

    $("p").on("click", function(){ 
     if (isActive) { 
      isActive = false; 
      console.info("The p was clicked"); 
     } 
    }); 
}()); 

Answer 3

«Это плохая практика?» : Да, потому что распределение памяти произойдет условно, что всегда считается плохим из-за сбоя GC. Это также способствует ошибочной логике, которая все больше зависит от способности языка понимать вас, а не понимать язык.

«Что было бы лучшим решением?» : Регистрировать обработчики событий, которые необходимы, применять логику в обработчике для выполнения на основе условных переменных, которые задаются другим обработчиком (-ами)

I.E: Обработчик b условно задается при событии a. Вместо этого: используется хендлер a, содержащий код, который устанавливает переменную, указанную в Handler b. Также задан обработчик b. Событие b срабатывает, но выполняется условно на основе ссылочной переменной.

Answer 4

Это плохо, потому что в вашем примере каждый раз, когда вы нажимаете «div», вы добавляете новый обработчик к «p». Нажмите три «divs», прежде чем вы нажмете «p», а обработчик события «p» будет выполняться три раза.

Один из способов обойти это использовать делегат:

$(document).delegate("p", "click", function() { /* do stuff */ });

Другой способ заключается в отвязать существующие обработчики затем перепривязывают их:

$("p").off(); $("p").on("click", function() { });

Третий способ заключается в используйте грязные флаги (которые должны быть установлены как глобальные, что не является лучшей практикой), чтобы проверить, не работает ли обработчик этого вызова:

$("p").on("click", function() { if (flag) { return; } else { flag = true; doStuff(); flag = false; } });