Как запретить родительскому div регистрировать щелчок при нажатии на дочерний класс;event.stopPropagation ();делать смешные вещи - PullRequest
Новая
       11

Как запретить родительскому div регистрировать щелчок при нажатии на дочерний класс;event.stopPropagation ();делать смешные вещи

0 голосов
/ 16 декабря 2011

У нас есть классическая проблема: щелкают дочернего элемента div, и также запускается событие click родителя. У меня есть кнопка внутри контейнера, которая расширяется и расширяется при нажатии.

Кнопка при нажатии должна:

  • Развернуть контейнер
  • Скрыть описание контейнера

Ниже приведены две функции щелчка: 

var $NotificationContainer = $("#NotificationContainer");
$NotificationContainer.append('<div class="Notification" title="'+title+'"></div>');
var $thisNotification = $NotificationContainer.children('.Notification[title='+uniqueTitle+']');
$thisNotification.append('<div class="NotificationDescription">'+uniqueDescription+'</div>');
$(".NotificationDescription").hide();

// Button used to close an expanded notification
$thisNotification.append("<div class='NotificationCloseButton'></div>");
$('.NotificationCloseButton').hide();

$thisNotification.click(function()
{
        $(this).animate({height:250}, 1000);
        $(this).find('.NotificationDescription').slideToggle('fast');
        $(this).find('.NotificationCloseButton').slideToggle('fast');
});

$(".NotificationCloseButton").click(function()
{
        $thisNotification.animate({height:50}, 1000);
        $(this).find('.NotificationDescription').slideToggle('fast');
        $(this).find('.NotificationCloseButton').slideToggle('fast');
});

С этим кодом я нахожу, что при нажатии кнопки закрытия:

  • СлайдПереключает описание, которое будет скрыто
  • SlideПереключает кнопку закрытия, чтобы скрыть
  • Контейнер расширяется, но затем снова расширяется (содержимое все еще скрыто)

Называется $thisNotification щелчок (я думаю).

Теперь, когда я пытаюсь использовать event.stopPropagation(); или простое return false; в клике кнопки closeButton, я получаю очень интересные результаты.

Теперь нажмите кнопку закрытия с помощью одного из перечисленных выше дополнений:

  • Раскрывает контейнер
  • Описание и кнопка остаются в наличии и не перемещаются полностью.

Фрагменты кода того, как я реализовал stopPropogation и вернул false: 

$(".NotificationCloseButton").click(function(event)
{
    event.stopPropagation();
    $thisNotification.animate({height:50}, 1000);
    $(this).find('.NotificationDescription').slideToggle('fast');
    $(this).find('.NotificationCloseButton').slideToggle('fast');
});

и 

$(".NotificationCloseButton").click(function()
{
    $thisNotification.animate({height:50}, 1000);
    $(this).find('.NotificationDescription').slideToggle('fast');
    $(this).find('.NotificationCloseButton').slideToggle('fast');
    return false;
});

1 Ответ

1 голос
/ 16 декабря 2011

У вас есть привязки кликов для родительского объекта: 

$thisNotification

и для дочернего объекта: 

$(".NotificationCloseButton")

Когда вы нажимаете кнопку закрытия, событие 'click' запускается для обоих обработчиков, все анимации ставятся в очередь, и вы получаете нежелательное действие закрытие-открытие-открытие.

У вас есть несколько вариантов решения этой проблемы. # 1 - отсоединить родительский обработчик кликов и перепривязать его после нажатия кнопки закрытия. 

$thisNotification.click(function()
{
    notificationClickHandler(); //animations are separated from bindings
    $thisNotification.unbind('click');
});

В качестве альтернативы, jQuery имеет метод .clearQueue (), который удаляет все анимации в очереди. Это может иметь побочные эффекты, когда пользователи быстро работают с мышью или если ваша страница перегружена анимацией jQuery, поэтому вам придется поэкспериментировать с соответствующим уровнем области действия для вашего приложения. 

$(".NotificationCloseButton").click(function()
{
    $thisNotification.animate({height:50}, 1000);
    $(this).find('.NotificationDescription').slideToggle('fast');
    $(this).find('.NotificationCloseButton').slideToggle('fast');
    $.clearQueue();
});
...