15

我的 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

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

4

9 回答 9

18

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

其实有多种解决方案：

  • 检查 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)

这是不必要的，因为类中没有任何元素.expandable-panel-heading也具有#ancherComplaint其 ID。

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

于 2013-10-29T10:44:13.587 回答
2

试试这个

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

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

演示

于 2013-10-29T10:45:18.820 回答
2

尝试以下：

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

于 2013-10-29T10:46:35.830 回答
2

用这个改变你的 jQuery 代码。它会提醒 a 的 id。

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

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

演示

于 2013-10-29T10:50:52.337 回答
1

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

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

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);
}
于 2013-10-29T10:45:06.723 回答
1

我会这样使用stopPropagation：

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

$('#ancherComplaint').on('click',function(e){
    e.stopPropagation();
    alert('hiiiiiiiiii');
});
于 2013-10-29T10:51:29.650 回答
0

试试这个例子，仍然从您的 HTML 调用 onclick，并且事件冒泡停止。

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

于 2013-10-29T11:15:23.067 回答
0

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

$(document).ready(function() {

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

});
于 2014-02-27T16:35:41.560 回答
0

当点击 div alert 键时

   $(document).delegate(".searchbtn", "click", function() {
        var key=$.trim($('#txtkey').val());
        alert(key);
        });
于 2016-04-09T06:49:40.037 回答