Как избежать запуска события клика

Question

У меня есть скрипт панели переключения в jQuery, в результате чего мой контент расширяется и сворачивается, когда я щелкаю элемент h2.

Проблема в том, что у меня есть поля ввода в этом элементе h2, которые появляются, когда я пытаюсь что-то редактировать с помощью jEditable. Я хотел бы найти способ, чтобы при нажатии на это поле ввода я не получал событие щелчка.

Я предполагаю, что каким-то образом использовать метод селектора :not, но я пробовал несколько итераций, но безрезультатно.

КОД

    //toggle panel content
    $(".panelcollapsed h2").click(function(){
        $(this).siblings(".panelcontent").slideToggle(100, 'easeInQuad');
    });

Answer 1

Вам необходимо проверить event.target:

//toggle panel content
$(".panelcollapsed h2").click(function(e){
    if ($(e.target).is('h2'))
       $(this).siblings(".panelcontent").slideToggle(100, 'easeInQuad');
});

Answer 2

Не совсем уверен, как выглядит ваш DOM, так что просто снимайте в темноте.Возможно, использование e.stopPropagation() в функции щелчка ввода может помочь?

Answer 3

Вы можете проверить, произошло ли событие в элементе input, и проигнорировать его, если оно произошло:

$(".panelcollapsed h2").click(function(e){
    if (e.target.tagName.toLowerCase() === 'input') {
        return;
    }

    $(this).siblings(".panelcontent").slideToggle(100, 'easeInQuad');
});

Это проверяет tagName из e.target, элемент, из которого произошло событие, чтобы определить, совпадает ли оно с input. Если это так, return выходит из обработчика событий.

Answer 4

на вашем входе внутри тега h2 вы можете добавить event.stopPropagation () на его клик.

$('#inputInsideH2').click(function(event){
   event.stopPropagation();
   $(this).focus();
};

event.stopPropagation () остановит распространение события click.