jQuery html div onclick 事件

html div onclick event

提问by Anil Chavda

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

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

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

js code

js代码

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

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

here I when I click on divI got alert with 123message, its fine but when I click on ABCI want message I want to call markActiveLinkmethod.

在这里，当我单击div 时，我收到了带有123消息的警报，这很好，但是当我单击ABC 时，我想要消息，我想调用markActiveLink方法。

JSFiddle

JSFiddle

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

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

回答by ComFreek

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

问题是点击锚点仍然会触发你的<div>. 这就是所谓的“事件冒泡”。

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

• 在 DIV 单击事件处理程序中检查实际目标元素是否是锚点
  → 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"));
  });
  

• 停止从锚点单击侦听器的事件传播
  → jsFiddle

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

---

---

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

:not(#ancherComplaint)

This was unnecessary because there is no element with the class .expandable-panel-headingwhich also have #ancherComplaintas its ID.

这是不必要的，因为没有具有该类的元素.expandable-panel-heading也有#ancherComplaint它的 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.

我假设您想抑制锚点的事件。这不能以这种方式工作，因为两个选择器（你的和我的）都选择了完全相同的 DIV。选择器在调用时对侦听器没有影响；它只设置侦听器应注册到的元素列表。由于此列表在两个版本中相同，因此没有区别。

回答by Satpal

Try this

尝试这个

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

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

DEMO

演示

回答by Nishu Tayal

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/

这是工作演示：http: //jsfiddle.net/JVrNc/4/

回答by Ari Susanto

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

使用此更改您的 jQuery 代码。它会提醒 a 的 id。

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

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

Demo

演示

回答by mamdouh alramadan

I would have used stopPropagationlike this:

我会这样使用stopPropagation：

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

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

回答by mplungjan

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

如果你有 jQuery，你需要阅读事件冒泡，并确保删除内联事件处理

Test the click on the div and examine the target

测试 div 上的点击并检查目标

Live Demo

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

回答by ER144

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

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

http://jsfiddle.net/NXML7/1/

回答by borchvm

put your jquery function inside ready function for call click event:

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

$(document).ready(function() {

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

});

回答by M.Ganji

when click on div alert key

当单击 div 警报键时

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