Question

我有以下html：

<div ng-click="handleClick($event)">
  <input type="text" />
</div>

与JS：

$scope.handleClick = function($event) {
  $scope.target = $event.target.tagName;
  $event.stopPropagation();
};

我不明白为什么收到的$event.target是<input />标记而不是包裹它的<div>。

以下是情况的一部分：http://plnkr.co/edit/9dIMPDUsUWJd3r9lWmZD?p=preview

编辑：显然，jQuery也是如此：https://plnkr.co/edit/qxvt7Gh9o61W4exBOB7V?p=preview

$(document).on('ready', function(){
  $('#wrapper').on('click', function(e){
    var target = e.target.tagName;
    $('p').text('The target element is '+target);
  });    
});

<div id="wrapper">
  <input type="text" />
</div>

Answer 1

target属性获取事件最初的元素发生

在您的情况下 - input，因为那是您实际点击的内容。

currentTarget属性是指其事件的元素监听器触发了事件

在您的情况下 - div，因为您放置了listener。

只需将$event.target.tagName;更改为$event.currentTarget.tagName;。

plunker

Answer 2

因为你点击了输入？ div的高度未定义，因此它与输入高度相同。

但div（默认情况下再次）占用所有宽度。如果单击右上角 - 您将单击div。

为什么在子节点上触发click事件而不是侦听DOM元素？

2 个答案: