イベント発火元がどの要素の中に存在するか調べる

要素を含むかどうかを調べるのは、$.contains( )

たとえばスクロールイベントを想定してみます。

特定の要素上でスクロールされたときのみ、任意の処理を止めることが可能です。

文字列を含むかどうかの判定は:containsフィルターを使えばよいのですが、ある要素がある別の要素に含まれているか調査することは:containsフィルターではできません。

jQueryのメソッドである、$.contains( ) を使うというのが端的な答えなのですが、段階を追って説明します。

まず、下記のような事例を想定します。

スクロール可能な白いボックス（仮にELEMENTというクラス名だったとします）上でスクロールしたときのみ、文字列を出力するようにします。

まずイベントの発火元は次の方法で取得できます。

※ここではmousewheel.jsというプラグインを使う想定で進めさせて頂きます。もちろんclickイベントをはじめとする様々なイベントにも対応しています。

$('html').on('mousewheel',function(e){
    var target = e.target;
});

ただし、仮に.ELEMENT上でスクロールしたとしても、このtargetに格納される要素はカーソルの位置によって.ELEMENTの子要素であるdivであったりpであったりします。

そこで、targetに格納された要素が、.ELEMENTに含まれているかどうかを調べます。

$('html').on('mousewheel',function(e){
    var target = e.target;
    var container = $('.ELEMENT').get(0);
    var isContain = $.contains(container,target);  //戻り値はboolean(含んでいればtrue)
    if(isContain){
        console.log('XXXXX'); 
    }
)};

$.contains( )の引数にはDOM要素のみ使用できるため、getメソッドでjQueryオブジェクトをDOM要素に変換しています。

第一引数にはイベント発火元を含むか調査したい要素、第二引数にはイベント発火元自身を与えます。

メソッド自身はjQueryのメソッドですが、引数はDOMオブジェクトなので混同されないようご注意ください。