web-dev-qa-db-ja.com

html div onclickイベント

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"));
}

ここで私はdivをクリックすると、123メッセージ、それは問題ありませんが、クリックすると[〜＃〜] abc [〜＃〜]markActiveLinkメソッド。

JSFiddle

私のコードの何が問題になっていますか？私を助けてください。

javascriptjqueryhtmlonclick
15
Anil Chavda

問題は、アンカーをクリックしても_<div>_のクリックがトリガーされることでした。これは「 event bubbling 」と呼ばれます。

実際、複数のソリューションがあります。

  • 実際のターゲット要素がアンカーであったかどうかを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)
_

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

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

18
ComFreek

これを試して

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

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

[〜＃〜] demo [〜＃〜]

2
Satpal

フォローしてみてください：

$('.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/

2
Nishu Tayal

これでjQueryコードを変更します。 aのIDを警告します。

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

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

デモ

2
Ari Susanto

とにかく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);
}
1
mplungjan

私はこのようにstopPropagationを使用していました：

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

$('#ancherComplaint').on('click',function(e){
    e.stopPropagation();
    alert('hiiiiiiiiii');
});
1
mamdouh alramadan

この例を試してください。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/

0
ER144

jquery関数を、クリックイベントを呼び出すためのready関数内に配置します。

$(document).ready(function() {

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

});
0
borchvm

divアラートキーをクリックすると

   $(document).delegate(".searchbtn", "click", function() {
        var key=$.trim($('#txtkey').val());
        alert(key);
        });
0
M.Ganji