Question

当我点击parent并获得parent id（tmp）时，我的功能开始工作，但是当我点击child时，我的功能也可以正常工作但返回{ {1}}。如何点击undefind parent对点击id或child或parent div中的其他元素无关紧要？

parent

<div class="parent" id="tmp">
    <div class="child"></div>
</div>

.parent {
    width: 100px;
    height: 100px;
}

.child {
    width: 50px;
    height: 50px;
}

Answer 1

尝试：

$('.parent').click(function(){
  console.log($(this).attr('id'));
  //console.log($(this)[0].id)
});

或

$('.parent').click(function(e){
  console.log(e.currentTarget.id);
});

或

$('.parent').click(function(e){
  console.log(e.delegateTarget.id);
});

Answer 2

在您的点击处理程序中，您应该使用this来引用处理该事件的元素：

'click .parent': function(){
    console.log(this.id);
}

通过使用e.target，您定位的是发起事件的元素 - 在您描述的情况下，该元素将是.child元素没有id属性。

如果由于Meteor施加的限制而无法使用this关键字，则可以使用currentTarget上的event属性，因为它应具有相同的效果：

'click .parent': function(e){
    console.log(e.currentTarget.id); // or $(e.currentTarget).prop('id')
}

Answer 3

这是你想要的吗？

$(function() {
  $('div').click(function(e) {
    var id = $(e.target).parent().attr('id');
    
    if (typeof id === 'undefined') {
        //return current element as this is a parent
        console.log($(e.target).attr('id'));
    } else {
        //return parent's id 
        console.log(id);
    }
  });
});

.parent {
  width:100px;
  height:100px;
  background: red;
}

.child {
  width:50px;
  height:50px;
  background: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" id="tmp">
  <div class="child">
  </div>
</div>

获取id父元素

3 个答案: