0

html5 と JavaScript を使用してサンプル グリッド アプリケーションを作成しました。

今私が達成したいのは、ユーザーがグループ ヘッダーをクリックしたときにアニメーションを表示することです。

そのために、2 つの関数を作成しました。1 つは mousedown イベント用で、もう 1 つは mouse up イベント用です。

function animateDown() {
    WinJS.UI.Animation.pointerDown(this);
}
function animateUp() {
    WinJS.UI.Animation.pointerUp(this);
}

ここで、これらの関数を各ヘッダーのイベント リスナーに追加します。多くのグループ ヘッダーがあり、ID はなく、クラス名だけです。

では、すべての見出しにイベントリスナーを追加するにはどうすればよいでしょうか?

4

1 に答える 1

1

イベント委任を使用する必要があります。したがって、すべての要素がコンテナー内にある場合は、次のことができます。

function toggle(event) {
   var header = event.target;
   if (header.classList.toggle("open") {
      WinJS.UI.Animation.pointerDown(header);
   } else {
      WinJS.UI.Animation.pointerDown(header);
   }
}

document.querySelectorAll(".container").addEventListener("click", toggle, false);
于 2012-02-28T12:15:02.583 に答える