Javascript html div onclick事件

我在我的jsp页面上有一个html div，我在上面放了一个锚定标记，请在下面找到相应的代码

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

在这里，当我点击div时，我收到了带有

123

消息的警报，这很好，但当我点击ABC时，我想要消息，我想调用

markActiveLink

方法

---

我的代码有什么问题？请帮帮我。

问题是，单击锚点仍然会触发您的

中的单击。那叫“我的朋友”

事实上，有多种解决方案：

• 在DIV click事件处理程序中检查实际目标元素是否为锚
  

• 停止锚单击侦听器中的事件传播
  

---

您可能已经注意到，我已经从示例中删除了以下选择器部分：

:not(#ancherComplaint)

这是不必要的，因为没有类

.expandable panel heading

的元素，该类的ID也为

#ancherComplaint

---

我猜你想为主播取消该事件。这不能以那种方式工作，因为两个选择器（你的和我的）都选择了完全相同的DIV。选择器在被调用时对侦听器没有影响；它只设置侦听器应注册到的元素列表。由于这两个版本中的列表相同，因此不存在任何差异。

您需要仔细阅读事件冒泡，如果仍然使用jQuery，请务必删除内联事件处理

测试单击div并检查目标

试试这个

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

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

尝试以下操作：

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

---

下面是工作演示：

用这个更改jQuery代码。它将提醒a的id

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

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

---

我会像这样使用

stopPropagation

：

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

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

---

试试这个例子，onclick仍然从HTML调用，事件冒泡停止

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

---

将jquery函数放入调用单击事件的就绪函数中：

$(document).ready(function() {

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

});

---

当单击div警报键时

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

---

您需要仔细阅读事件冒泡，并确保删除内联事件处理（如果您有jQuery），您可以继续使用它。您需要的是在使用onclick之前放置该方法。在此处更新fiddle单击DIV中的任意位置将显示两个警报（）。

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

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

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

$(document).ready(function() {

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

});

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