0

div の子がクリックされ、親のクリック イベントもトリガーされるという古典的な問題があります。クリックすると展開および展開解除されるコンテナ内にボタンが設定されています。

ボタンをクリックすると、次のようになります。

  • コンテナを解凍する
  • コンテナの説明を隠す

2 つのクリック機能を以下に示します。

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');
});

このコードで私が見つけたのは、閉じるボタンをクリックしたときです:

  • SlideToggle 説明を非表示にします
  • Slide閉じるボタンを非表示に切り替えます
  • コンテナーは展開されませんが、再度展開されます (コンテンツはまだ非表示になっています)。

クリックが呼び出されてい$thisNotificationます（と思います）。

今、closeButton のクリックでevent.stopPropagation();or を単純に使用しようとすると、非常に興味深い結果が得られます。return false;

上記の追加のいずれかで閉じるボタンをクリックすると、次のようになります。

  • コンテナを展開解除します
  • 説明とボタンはそのまま残り、slideToggle はまったく行われません。

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;
});
4

1 に答える 1

1

親オブジェクトのクリック バインディングがあります。

$thisNotification

子オブジェクトの場合:

$(".NotificationCloseButton")

閉じるボタンをクリックすると、両方のハンドラーに対して「クリック」イベントが発生し、すべてのアニメーションがキューに入れられ、望ましくない「閉じてから開く」アクションが発生します。

これを解決するには、いくつかのオプションがあります。＃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();
});
于 2011-12-15T22:23:23.523 に答える