javascript - 为什么点击事件是在子元素上触发而不是监听 DOM 元素？

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

The target property gets the element on which the event originally occurred

就您而言 - 输入，因为这就是您实际点击的内容。

The currentTarget property refers to the element whose event listener triggered the event

在您的例子中 - div，因为这是您放置监听器的位置。

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

plunker .