HTML div 的 onclick 事件

Question

我在jsp页面上有一个html div，在其中放置了一个锚点标签，请查看下面的代码：

<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

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

- Anil Chavda

---

如果你已经使用jQuery，那么你需要了解一下事件冒泡，并确保移除内联事件处理程序。 - mplungjan

可能是 jQuery stopPropagation bubble down 的重复问题。 - Tats_innit

你可以继续使用这个，你需要做的就是在onclick被使用之前放置该方法。在此处更新fiddle http://jsfiddle.net/JVrNc/7/ - vipulsharma

Answer 1

问题在于点击锚点仍会触发

中的点击事件。这被称为“事件冒泡”。

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

• Checking in the DIV click event handler whether the actual target element was the anchor
  → 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"));
  });
  

• Stopping the event propagation from the anchor click listener
  → jsFiddle

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

---

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

:not(#ancherComplaint)

这段代码是多余的，因为没有一个类名为.expandable-panel-heading且ID为#ancherComplaint的元素存在。

我猜你想禁止锚点的事件。但是这种方式行不通，因为你和我选择器选择的是同一个DIV元素。选择器在监听器被调用时没有影响，它只设置应该注册监听器的元素列表。由于这个列表在两个版本中是相同的，所以没有区别。

- ComFreek

Answer 2

试试这个

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

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

演示

- Satpal

Answer 3

尝试以下操作：

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

- Nishu Tayal

Answer 4

使用以下代码替换您的jQuery代码。它将弹出a标签的id。

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

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

Demo

- Ari Susanto

---

点击 DIV 中的任何位置都会导致显示两个 alert()。 - ComFreek

Answer 5

你需要了解事件冒泡，如果你已经使用jQuery，一定要删除内联事件处理程序。

测试div上的点击事件并检查目标。 演示实例

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

- mplungjan

Answer 6

我会这样使用 stopPropagation ：

：

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

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

- mamdouh alramadan

Answer 7

当点击 div 时，弹出键

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

- M.Ganji

Answer 8

将您的jQuery函数放在ready函数中以调用click事件：

$(document).ready(function() {

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

});

- borchvm

Answer 9

尝试一下这个例子，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/

- ER144