获取包含单击事件的元素

我试图使用事件连接来确定将在我的指令中使用哪个模板。问题是我无法弄清楚如何获得点击事件绑定的按钮元素。事件目标可以根据用户点击鼠标的位置而有所不同。它可以是跨度或按钮标签。获取按钮元素的最佳方式是不是目标是跨度或按钮，而没有各种疯狂的条件代码？获取包含单击事件的元素

另外我不能自定义指令，因为我使用的是Angular Material，而且我不能使用jQuery。

HTML：

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

来源

2016-06-19 Aaron

使用Stack Snippets（'<>'工具栏按钮）在问题中使用* runnable * [MCVE]可以更容易地获得有用的答案。 –

** [This answer]（http://stackoverflow.com/a/12431211/3639582）**可能会有所帮助。你可以通过'authDialog（）'定义中的'$ event.target'来访问元素。 –

为什么不附加eventlisteners对所有你感兴趣的元素使用short for循环，并且每当一个元素被点击时处理程序将返回目标？。是否你感兴趣？ – repzero

event.currentTarget告诉你该事件被吸引住的元素，而不是其所触发的一个（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。

来源

2016-06-19 13:46:05

谢谢。关于无效的HTML，这是Angular Material在跨越后执行的方式。猜猜那里没有太多的事要做。 – Aaron

@Aaron：听起来像是一个混乱的模板。我很确定Angular不会强制HTML上的人无效。 –

所以按钮指令如下：注册添加类md-raised似乎使指令添加了div。我无法从文档中看到任何改变这种情况的方法： https://material.angularjs.org/latest/api/directive/mdButton – Aaron

获取包含单击事件的元素

回答

相关问题