html div onclick event

前端 未结 9 1085
渐次进展
渐次进展 2021-02-05 13:23

I have one html div on my jsp page, on that i have put one anchor tag, please find code below for that,

相关标签:
9条回答
  • 2021-02-05 13:51

    Try out this example, the onclick is still called from your HTML, and event bubbling is stopped.

    <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 讨论(0)
  • 2021-02-05 13:57

    Try following :

    $('.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"));
    } 
    

    Here is the working demo : http://jsfiddle.net/JVrNc/4/

    0 讨论(0)
  • 2021-02-05 13:57

    Change your jQuery code with this. It will alert the id of the a.

    $('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
    markActiveLink();    
         alert('123');
     });
    
    function markActiveLink(el) {   
    var el = $('a').attr("id")
        alert(el);
    } 
    

    Demo

    0 讨论(0)
  • 2021-02-05 13:59

    You need to read up on event bubbling and for sure remove inline event handling if you have jQuery anyway

    Test the click on the div and examine the target

    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);
    } 
    
    0 讨论(0)
  • 2021-02-05 14:04

    I would have used stopPropagation like this:

    $('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
         alert('123');
     });
    
    $('#ancherComplaint').on('click',function(e){
        e.stopPropagation();
        alert('hiiiiiiiiii');
    });
    
    0 讨论(0)
  • 2021-02-05 14:11

    Try this

    $('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
        alert('123');
    });
    
    $('#ancherComplaint').click(function (event) {
        alert($(this).attr("id"));
        event.stopPropagation()
    })
    

    DEMO

    0 讨论(0)
提交回复
热议问题