15

JSP ページに 1 つの html div があり、その上に 1 つのアンカー タグを配置しました。そのためのコードを以下に示します。

<div class="expandable-panel-heading">
     <h2>
         <a id="ancherComplaint" href="#addComplaint" 
                            onclick="markActiveLink(this);">ABC</a>
     </h2>
</div>

jsコード

$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
     alert('123');
 });

function markActiveLink(el) {   
    alert($(el).attr("id"));
}

ここで、div123をクリックすると、メッセージでアラートが表示されましたが、問題ありませんが、 ABCmarkActiveLinkをクリックすると、メソッドを呼び出したいメッセージが表示されます。

JSFiddle

私のコードの何が問題なのですか? 私を助けてください。

4

9 に答える 9

18

問題は、アンカーをクリックしても<div>. これを「イベント バブリング」と呼びます。

実際、複数の解決策があります。

  • 実際のターゲット要素がアンカーだったかどうかを DIV クリック イベント ハンドラーで確認する
    → jsFiddle

    $('.expandable-panel-heading').click(function (evt) {
    if (evt.target.tagName != "A") {
        alert('123');
    }

    // Also possible if conditions:
    // - evt.target.id != "ancherComplaint"
    // - !$(evt.target).is("#ancherComplaint")
});

$("#ancherComplaint").click(function () {
    alert($(this).attr("id"));
});

  • アンカークリックリスナーからのイベント伝播を止める
    → jsFiddle

    $("#ancherComplaint").click(function (evt) {
    evt.stopPropagation();
    alert($(this).attr("id"));
});

お気づきかもしれませんが、例から次のセレクター部分を削除しました。

:not(#ancherComplaint)

IDとして.expandable-panel-headingも持つクラスを持つ要素がないため、これは不要でした。#ancherComplaint

アンカーのイベントを抑制したいと思います。両方のセレクター (あなたのものと私のもの) がまったく同じ DIV を選択するため、その方法では機能しません。セレクターは、呼び出されたときにリスナーに影響を与えません。リスナーを登録する要素のリストを設定するだけです。このリストは両方のバージョンで同じであるため、違いはありません。

于 2013-10-29T10:44:13.587 に答える
2

これでjQueryコードを変更してください。aのIDを警告します。

$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
markActiveLink();    
     alert('123');
 });

function markActiveLink(el) {   
var el = $('a').attr("id")
    alert(el);
}

デモ

于 2013-10-29T10:50:52.337 に答える
2

これを試して

$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
    alert('123');
});

$('#ancherComplaint').click(function (event) {
    alert($(this).attr("id"));
    event.stopPropagation()
})

デモ

于 2013-10-29T10:45:18.820 に答える
2

以下を試してください：

$('.expandable-panel-heading').click(function (e) {
        if(e.target.nodeName == 'A'){
            markActiveLink(e.target)
            return; 
        }else{
            alert('123');
        }
 });

function markActiveLink(el) {   
    alert($(el).attr("id"));
}

これが実際のデモです: http://jsfiddle.net/JVrNc/4/

于 2013-10-29T10:46:35.830 に答える
1

私はstopPropagationこのように使用していたでしょう：

$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
     alert('123');
 });

$('#ancherComplaint').on('click',function(e){
    e.stopPropagation();
    alert('hiiiiiiiiii');
});
于 2013-10-29T10:51:29.650 に答える
1

とにかくjQueryがある場合は、イベントバブリングを読み、インラインイベント処理を確実に削除する必要があります

div のクリックをテストし、ターゲットを調べます

Live Demo

$(".expandable-panel-heading").on("click",function (e) {
    if (e.target.id =="ancherComplaint") { // or test the tag
        e.preventDefault(); // or e.stopPropagation()
        markActiveLink(e.target);
    }    
    else alert('123');
});
function markActiveLink(el) {   
    alert(el.id);
}
于 2013-10-29T10:45:06.723 に答える
0

コールクリックイベントの準備ができた関数内にjquery関数を入れます：

$(document).ready(function() {

  $("#ancherComplaint").click(function () {
     alert($(this).attr("id"));
  });

});
于 2014-02-27T16:35:41.560 に答える
0

divアラートキーをクリックしたとき

   $(document).delegate(".searchbtn", "click", function() {
        var key=$.trim($('#txtkey').val());
        alert(key);
        });
于 2016-04-09T06:49:40.037 に答える
0

この例を試してみてください。onclick は引き続き HTML から呼び出され、イベントのバブリングは停止します。

<div class="expandable-panel-heading">
<h2>
  <a id="ancherComplaint" href="#addComplaint" onclick="markActiveLink(this);event.stopPropagation();">ABC</a>
</h2>
</div>

http://jsfiddle.net/NXML7/1/

于 2013-10-29T11:15:23.067 に答える