单击父 ID 和子 ID 的功能

Question

<div id="main_div" style="border:1px solid black;height:20%;width:40%;">
  <div id="first">first div<div>
  <div id="second">second div</div>
  <input id="third" type="text" value=""/>
</div>

我想要的是，当我单击main_div的子元素时，我想到达那里 id，当我单击父元素main_div时，我可以使用单击函数获取其 ID。约束是我不能为父元素和子元素提供一些类。

Answer 1

像这样：

$('#main_div').on('click', function(e){
   alert(e.target.id);
});

对于 jQuery <1.7 使用

$('#main_div').click(function(e){
   alert(e.target.id);
});

在这里摆弄 http://jsfiddle.net/7TXjF/

Answer 2

由于您的问题有一个jquery标签，我将用jquery答案来回应。

$("#main_div").click(function(e) {
    alert($(e.target).attr("id"));
});

另请参阅此小提琴：http://jsfiddle.net/wEPHh/1/

Answer 3

这应该可以解决问题...

$('#main_div,#first,#second,#third').click(function(){
    console.log(this.id);
});

Answer 4

试试 -

​$("div").click(function(event) {
   alert(this.id);
   event.stopPropagation();        
});

这应该会提醒您单击的任何div的 id，但对 event.stopPropagation() 的调用将防止事件冒泡到任何父div。

工作演示 - http://jsfiddle.net/CVLCb/

Answer 5

从这个答案中，你可以这样做：

$('div').click(function(evt){
  var currentID = this.id || "No ID!";
  alert(currentID);
})

这将显示单击的div 的 ID。