Question

如果将onclick事件绑定到父级，jQuery中是否有方法可以告诉哪个孩子被点击了？

例如：

  $('#daddy').click(function () {
    // if($("#son").isClicked()){return true;}
    //return false;
  });

并且标记看起来像：

<div id="daddy">
  <span id="son"></span>
  <span id="daughter"></span>
</div>

Answer 1

传递给click的事件处理程序将收到event个对象作为其第一个参数。事件的target（即发起事件的元素）将在那里指定。

以下是jQuery documentation：

的示例

<!DOCTYPE html>
<html>
<head>
  <style>
span, strong, p { 
  padding: 8px; display: block; border: 1px solid #999;  }
    </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<div id="log"></div>
<div>
  <p>
    <strong><span>click</span></strong>
  </p>
</div>
<script>

$("body").click(function(event) {
  $("#log").html("clicked: " + event.target.nodeName);
});

</script>  
</body>
</html>

Answer 2

您可以使用event.target来确定点击的内容：

  $('#daddy').click(function (e) {
      alert(e.target.id); // The id of the clicked element
  });

这是simple example。

Answer 3

至少应该是一个不同的视角：

$('#parent').on("click", function(evt) {
        evt.stopPropagation();
        if($.inArray(evt.currentTarget, $(this).children())){
            console.log(evt.currentTarget);
        }
});

Answer 4

检查此demo

$(function() {
    $('#parent').delegate('a', 'click', function(evt) {
        debugger;
        evt.stopPropagation();
        alert($(evt.currentTarget).attr('id'));
    });
});

Answer 5

尝试使用此替代

$('#daddy span').click(function () {
    var clicked = $(this).attr('id');
    if(clicked == "son"){
        return true;
    }
    return false;
});

Answer 6

使用event.target获取真正点击的节点：

$('#daddy span').on('click',function(event){
    if(event.target.nodeName=='BUTTON'){//Was clicked a button
        ....
    }
    if(event.target.id=='id'){//Was clicked #id
        ....
    }
    ...
});

如何确定是否在Jquery中单击了子项

6 个答案: