5 
<div id="addCompaniesModal">
    <div id="addCompany_map"></div>
    <div class="addMarkerBtn"></div>
</div>

こんにちは、子 addCompany_mapをクリックすると、親 addCompaniesModalが呼び出されないはずです...私はこのようなことをしましたが、何らかの理由で機能しませんでした。解決策を説明してください

$(document).on('click','#addCompany_map', function (e) {
    e.stopPropagation();
});

$('#addCompaniesModal').click(function(){
});
4

5 に答える 5

4

イベントの伝播は、子要素から親要素に発生しています。

最初の行が子divのクリックを処理しているように見えるかもしれませんが、指定した方法で実際にドキュメントレベルのクリックが処理され（セレクターがであるため$(document)）、子divで発生した場合にのみメソッドが呼び出されます（on('click','#addCompany_map'部）。ドキュメントはaddCompaniesModaldivの親であるため、クリックハンドラーはdivで使用されたものの後に起動しますaddCompaniesModal。

これを機能させるには、コードを次のように変更する必要があります。

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

$('#addCompaniesModal').click(function(){

});

編集：

いくつかのコメントで、$(document).on('click', ...アプローチを使用している主な理由は、子divを動的に追加しているためであることがわかりました。

その場合、問題を処理するための2つの実行可能なアプローチがあります。

最初のアプローチは、子divハンドラーも動的に追加し、削除時にバインドを解除することです。このアプローチを使用できます。

function dynamicallyAddChildren(){
  var oldChildDiv = $('#addCompany_map');
  if (oldChildDiv.length > 0)
    oldChildDiv.off('click', handleChildDiv);
  // remove old child if needed and add new child divs
  newChildDiv.on('click', handleChildDiv);
}

function handleChildDiv(e){
  //do something
  e.stopPropagation();
}

$('#addCompaniesModal').click(function(){
});

$(document).on('click', ...2番目のアプローチは、次のように子と親の両方のdivでアプローチを使用することです。

$(document).on('click','#addCompany_map', function (e) {
    e.stopPropagation();
});

$(document).on('click','#addCompaniesModal', function(){
});​
于 2012-11-28T23:53:59.250 に答える
0

おもう：

$("#addCompany_map").click(function(){
  return false;
});
于 2012-11-28T23:48:09.490 に答える
0

にクリックイベントが#addCompaniesModalあります。これには。が含まれます#addCompany_map。したがって、子をクリックすると、親もクリックされます。

ここで何を達成したいのかを自問する必要があるようです。親の内部の子に特定の何かを発生させたい場合は、親のクリックイベントを削除します。#addCompany_map親内の、などではない別のオブジェクトに対してクリックイベントを発生させたい場合は.addMarkerBtn、それを実行します。しかし、上記の方法では機能しません。

于 2012-11-28T23:50:30.100 に答える
0

委任を使用して、ターゲット要素を確認します。それはあなたの問題を解決するはずです。

これにより、3つのdivクリックイベントすべてを1つのハンドラーで処理できます。

$('body').on('click','#addCompaniesModal',function(e) {

    if (e.target.id === 'addCompany_map') {
        alert('Clicked Map Div !!')
    }
    else if (e.target.className === 'addMarkerBtn') {
        alert('Clicked Marker Div !!')
    }
    else {
        alert('Parent Div !!')
    }
});​

フィドルをチェック

于 2012-11-28T23:53:09.537 に答える
0

この式を問題の最も簡単な解決策として使用してください。

$('#addCompaniesModal').on('click','div', function (e) {
    console.log(e.target.id || e.target.className);
    e.stopPropagation();
});

これにより、参照にあるように、パフォーマンスも向上します。大きなドキュメントで委任されたイベントにdocumentまたはdocument.bodyを過度に使用しないようにしてください。したがって、1つの石で2羽の鳥を殺しています。

2番目の式はそのままにしておくことができます。

$('#addCompaniesModal').click(function(){
});

ちなみに：.click(handler)はのショートカットです.on("click", handler)。

于 2012-11-29T09:22:46.647 に答える