jquery - jQuerystopPropagationが機能しない

Question

次のカラーピッカーを使用していますが、正常に動作しますが、カラーピッカーのアイコンをクリックすると、体に泡立たないようになります。だから私は次のことを試しましたが、カラーピッカーが機能していません。

http://jsfiddle.net/CWGgM/を確認してください。

以下のコードをjsfiddleから削除すると、機能します。これを引き起こしているのは何ですか

$('#test').click(function(e){
    e.stopPropagation();
});

Answer 1

独自のlive()スタイルコードを使用しているように見えます。この場合、イベントはバブルアップが許可され、で処理されますdocument。

したがって、イベントはに伝播する必要があります。そうでない場合、イベントは機能しdocumentません。

次の回避策を使用して、ボディでイベントがトリガーされるのを回避できます...

$('body').click(function(event) {
    if ($(event.target).parent()[0] == $('.mColorPickerTrigger')[0]) {
       return true;   
    }
});

jsFiddle。

または、これは複数のカラーピッカーでうまく機能する可能性があります...

$('body').click(function(event) {
    if ($(event.target).parent().hasClass('mColorPickerTrigger')) {
       return true;   
    }
});

jsFiddle。

Answer 2

@alexが述べたように、カラーピッカーは。を使用してドキュメント全体のクリックをリッスンしているようlive()です。伝播をブロックする前に、イベントがカラーピッカーから発生したかどうかを確認し、発生した場合はバブルすることができます。カラーピッカーアイコンのコンテナまたは内部の要素closest()のいずれかをクリックできるため、を使用する必要があります。<span><img>

$('#test').click(function(e){
    if($(e.target).closest('.mColorPickerTrigger').length) return;
    e.stopPropagation();
});

jsfiddleデモをチェックしてください：http：//jsfiddle.net/CWGgM/1/