クリックイベントを子要素に反映させない
クリックイベント要素が入れ子になっているときなど、子要素をクリックしたとき親要素のクリックイベントを発生させたくない場合のメモ。
$(".cate-list__item").click(function (e) {
if (!$(e.target).closest('.cate-list__item__subcat').length) {
//ここに任意のイベント
}
});| .target | イベントが発生した要素を取得する |
| .closest() | 要素とその親を、指定されたセレクター文字列に一致するノードが見つかるまで探索する |
| .length | 要素の長さや数を取得する。 ここでは要素があるかどうかを判定しています。 |
上記はcate-list__itemからcate-list__item__subcat要素を除いた部分をクリックした場合、みたいな記述。
参考
- JavaScriptイベントの子要素、孫要素への伝播をストップする – helog
https://helog.jp/javascript/stoppropagation/ - Element: closest() メソッド - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Element/closest - jQuery リファレンス：target
https://www.jquerystudy.info/reference/events/target.html