javascript - 获取包含点击事件的元素

Question

我正在尝试使用事件委托(delegate)来确定将在我的指令中使用哪个模板。问题是我无法弄清楚如何获取绑定(bind)点击事件的按钮元素。事件目标可能因用户单击时鼠标所在的位置而异。它可以是 span 或 button 标签。在没有各种疯狂的条件代码的情况下，无论目标是 span 还是按钮，获取按钮元素的最佳方法是什么？

此外，我无法自定义指令，因为我使用的是 Angular Material 而我无法使用 jQuery。

HTML:

<button ng-click="main.authDialog($event)">
  <span class="ng-scope">Sign Up</span>
  <div class="md-ripple-container"></div>
</button>

Answer 1

event.currentTarget 告诉您 Hook 事件的元素，而不是触发事件的元素 (event.target)。

例子:

var myApp = angular.module('exModule', []);
myApp.controller('exController', function($scope) {
  $scope.main = {
    authDialog(e) {
      console.log("target", e.target);
      console.log("currentTarget", e.currentTarget);
    }
  };
});

<div ng-app="exModule" ng-controller="exController">
  <button ng-click="main.authDialog($event)">
    <span class="ng-scope">Sign Up</span>
    <div class="md-ripple-container"></div>
  </button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

---

旁注:HTML 无效，button elements不能包含 div elements .