html div onclick事件 [英] html div onclick event

问题描述

我的jsp页面上有一个html div，我已经放了一个锚标签，请在下面找到代码，

 < div class =expandable-panel-heading> 
< h2> 
< a id =ancherComplainthref =＃addComplaint
 onclick =markActiveLink（this）;> ABC< / a> 
< / h2> 
< / div> 
  

js code

  $（'。expandable-panel-heading：not（#ancherComplaint）'）。click（function（）{
 alert（'123'）; 
}）; 
 
函数markActiveLink（el）{
 alert（$（el）.attr（id））; 
} 
  

这里我点击 div 警告与 123 消息，它的罚款，但当我点击 ABC 我想要调用 markActiveLink method。

JSFiddle

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

解决方案

问题在于，点击锚点仍然触发了您的< ; DIV> 。这就是所谓的活动冒泡。

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

• 在DIV点击事件处理程序中检查实际目标元素是锚
  
  → jsFiddle

    $（'。expandable-panel-heading'）。click（function（evt）{
   if（evt.target.tagName！=A）{
   alert（'123'）; 
  } 
   
   //如果条件：
   //  -  evt.target.id！=ancherComplaint
   //  - ！$（evt.target）.is（＃ancherComplaint）
  }）; 
   $ b $（＃ancherComplaint）。click（function（）{
   alert（$（this）.attr（id））; 
  }）; 
    




• 从锚定点击侦听器停止事件传播
  < a href =http://jsfiddle.net/JVrNc/5/ =nofollow noreferrer>→ jsFiddle

    $（＃ancherComplaint）。click（function（evt）{
   evt。 stopPropagation（）; 
   alert（$（this）.attr（id））; 
  }）; 
    

---

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

 ：not（#ancherComplaint）
  

这是不必要的，因为类 .expandable-panel-heading 也有 #ancherComplaint 作为它的ID。

我假设你想压制事件为主播。这不能以这种方式工作，因为这两个选择器（你的和我的）选择完全相同的DIV。被调用时，选择器对监听器没有影响;它只设置监听器应该注册到的元素列表。由于这两个版本的列表相同，因此没有区别。

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

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

js code

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

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

here I when I click on div I got alert with 123 message, its fine but when I click on ABC I want message I want to call markActiveLink method.

JSFiddle

what is wrong with my code? please help me out.

解决方案

The problem was that clicking the anchor still triggered a click in your <div>. That's called "event bubbling".

In fact, there are multiple solutions:

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

---

As you may have noticed, I have removed the following selector part from my examples:

:not(#ancherComplaint)

This was unnecessary because there is no element with the class .expandable-panel-heading which also have #ancherComplaint as its ID.

I assume that you wanted to suppress the event for the anchor. That cannot work in that manner because both selectors (yours and mine) select the exact same DIV. The selector has no influence on the listener when it is called; it only sets the list of elements to which the listeners should be registered. Since this list is the same in both versions, there exists no difference.

这篇关于html div onclick事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！