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

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文档中的一个示例：

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

这是一个简单的例子。

Answer 3

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

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

Answer 4

检查这个演示

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

Answer 5

使用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
        ....
    }
    ...
});

Answer 6

尝试这个替代方案

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

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

问题描述

6 个解决方案

解决方案1
23 已采纳 2012-02-29 19:03:51

解决方案2
4 2012-02-29 19:07:24

解决方案3
2 2012-02-29 19:15:05

解决方案4
1 2012-02-29 19:08:24

解决方案5
0 2017-09-08 15:19:41

解决方案6
0 2012-02-29 19:03:12

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

问题描述

6 个解决方案

解决方案1 23 已采纳 2012-02-29 19:03:51

解决方案2 4 2012-02-29 19:07:24

解决方案3 2 2012-02-29 19:15:05

解决方案4 1 2012-02-29 19:08:24

解决方案5 0 2017-09-08 15:19:41

解决方案6 0 2012-02-29 19:03:12

解决方案1
23 已采纳 2012-02-29 19:03:51

解决方案2
4 2012-02-29 19:07:24

解决方案3
2 2012-02-29 19:15:05

解决方案4
1 2012-02-29 19:08:24

解决方案5
0 2017-09-08 15:19:41

解决方案6
0 2012-02-29 19:03:12