html div onclick sự kiện

Question

tôi có một html div trên trang jsp của tôi, trên mà tôi đã đặt một thẻ neo, xin vui lòng tìm mã dưới đây để biết rằng,

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

js đang

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

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

đây Tôi khi tôi nhấp vào div Tôi đã nhận được thông báo với 123, tiền phạt của nó nhưng khi tôi nhấp vào ABC Tôi muốn thông báo tôi muốn gọi phương thức markActiveLink.

JSFiddle

điều gì sai với mã của tôi? hãy giúp tôi ra.

Answer 1

Vấn đề là việc nhấp vào neo vẫn kích hoạt nhấp chuột trong số <div> của bạn. Đó được gọi là "event bubbling".

Trong thực tế, có rất nhiều giải pháp:

• Kiểm tra trong xử lý sự kiện DIV nhấp chuột cho dù các yếu tố mục tiêu thực tế là neo
  → 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")); 
  }); 
  

• Dừng việc tuyên truyền sự kiện từ trình nghe nhấp chuột neo
  → jsFiddle

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

---

Như bạn có thể nhận thấy, tôi đã gỡ bỏ phần chọn sau đây từ các ví dụ của tôi:

:not(#ancherComplaint) 

này là không cần thiết vì không có phần tử với lớp .expandable-panel-heading mà cũng có #ancherComplaint làm ID của nó.

Tôi giả định rằng bạn muốn chặn sự kiện cho neo. Điều đó không thể làm việc theo cách đó bởi vì cả hai bộ chọn (của bạn và của tôi) chọn cùng một DIV. Bộ chọn không có ảnh hưởng đến người nghe khi nó được gọi; nó chỉ thiết lập danh sách các yếu tố mà người nghe phải được đăng ký. Vì danh sách này giống nhau trong cả hai phiên bản, nên không tồn tại sự khác biệt.

Answer 2

Bạn cần phải đọc lên về sự kiện bọt và chắc chắn loại bỏ inline sự kiện xử lý nếu bạn có jQuery nào

Kiểm tra các nhấp chuột trên div và kiểm tra mục tiêu

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

Answer 3

Hãy thử điều này

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

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

DEMO

Answer 4

Hãy thử sau:

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

Dưới đây là bản demo làm việc: http://jsfiddle.net/JVrNc/4/

Answer 5

Thay đổi mã jQuery của bạn với điều này. Nó sẽ cảnh báo id của a.

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

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

Demo

Answer 6

Tôi đã sử dụng stopPropagation như thế này:

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

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

Answer 7

Hãy thử ví dụ này, onclick vẫn gọi từ HTML của bạn, và sự kiện bọt được dừng lại.

<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/

Answer 8

đặt chức năng jquery của bạn bên trong chức năng sẵn sàng cho cuộc gọi bấm vào sự kiện:

$(document).ready(function() { 

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

}); 

Answer 9

Tôi có một vấn đề, tôi muốn thông qua một onclick trên một div hoặc đóng tôi sẽ có khác, nhưng tôi không bắt được onclick. Theo mã trong javascript:

<script type="text/javascript"> 
     function ocultar(){ 
     document.getElementById('ver').style.display = 'none';} 
    </script> 

và như tôi gọi nó từ div

<div class="divCierre" onclick="ocultar()"></div>

Answer 10

khi nhấp chuột vào div cảnh báo quan trọng

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