HTML DIV onclick事件

我有一个HTML DIV我的JSP页面上，对我已经把一个锚标记，请在下方找到代码是，HTML DIV onclick事件

<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

什么是错我的代码？请帮助我。

来源

2013-10-29 Anil Chavda

您需要在事件读了冒泡和肯定删除内联事件处理，如果你有jQuery – mplungjan

可能重复[jQuery stopPropagation bubble down]（http：// stackoverflow .com/questions/2728252/jquery-stoppropagation-bubble-down） –

您可以继续使用这个，只需要在使用onclick之前放置该方法即可。在此处更新提琴http://jsfiddle.net/JVrNc/7/ – vipulsharma

问题是点击锚点仍然触发了您的<div>中的点击。这就是所谓的“event bubbling”。

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

在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它也没有元素作为其ID的#ancherComplaint。

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

来源

2013-10-29 10:44:13 ComFreek

您需要在事件冒泡并宣读了肯定，如果您有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-29 10:45:06 mplungjan

试试这个

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

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

DEMO

来源

2013-10-29 10:45:18 Satpal

尝试以下操作：

$('.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-29 10:46:35

更改jQuery代码与此有关。它会提醒a的身份。

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

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

Demo

来源

2013-10-29 10:50:52

单击DIV中的任意位置将导致显示两个警报（）。 – ComFreek

我会用stopPropagation这样的：

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

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

来源

2013-10-29 10:51:29

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

来源

2013-10-29 11:15:23 ER144

把你的jQuery函数准备函数内部呼叫click事件：

$(document).ready(function() { 

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

});

来源

2014-02-27 16:35:41 borchvm

-1

我有一个问题，我想通过在一个div一个onclick或关闭我会有另一个，但我不赶上onclick。下的javascript代码：

<script type="text/javascript"> 
     function ocultar(){ 
     document.getElementById('ver').style.display = 'none';} 
    </script>

，当我把它从DIV

<div class="divCierre" onclick="ocultar()"></div>

来源

2014-09-09 12:37:02 Antonio

当点击DIV警报键

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

来源

2016-04-09 06:49:40

HTML DIV onclick事件

回答

相关问题