Angulaire ng-click $ event transmet l'élément enfant comme cible
Pour chaque td élément dans une table, j'ai un joint ng-click. Voici le (simplifié) html pour chaque cellule du tableau:
<td ng-click="cellClicked($event)">
<span ng-if="!cellEdit">{{event.eventName}}</span>
<input type="text" ng-if="cellEdit" ng-model="event.eventName">
</td>
Et mon (simplifié) ng-cliquez sur la fonction:
scope.cellClicked = function (event) {
rowScope.cellEdit = true
angular.element(event.target).find('input').focus()
}
Son mon objectif:
- Utilisateur clique sur une cellule de tableau
- Cellule change en "edit mode"
- Donner le focus à la entrée élément situé à l'intérieur de la td.
Droit maintenant, c'est de travailler aussi longtemps que l'utilisateur clique sur à l'intérieur de la td élément, mais pas sur l'élément span:
console.log(angular.element(event.target)) #--> [td...] (as desired)
Toutefois, si l'utilisateur clique sur l'élément span sein de la td:
console.log(angular.element(event.target)) #--> [span...]
Dans ce cas d'utilisation, l'affectation focus ne fonctionne pas. J'espérais pour accéder à l'élément parent de l' span de faire quelque chose comme:
angular.element(event.target.closest('td'))
ou
angular.element(event.target.parentNode)
Mais il semble que lorsqu'un élément est transmis via $event et accessible il n'y a pas de contexte parent.
Comment puis-je:
- Empêcher cliquant sur le span élément de cuisson de la td'ng-cliquez sur
- Sur cliquez de span élément traverser html de parent
source d'informationauteur Cumulo Nimbus
Vous devez vous connecter pour publier un commentaire.
En train de changer:
:
fixé mon problème.
Il me semble à l'aide de de l'événement.currentTarget est préféré à de l'événement.cible dans la majorité des cas d'utilisation.
event.target.closest('td')
ne fonctionnera pas parce queevent.target
est un élément du DOM et il n'a pas de méthodeclosest
. Vous devez créer un objet jQuery pour utiliser cette méthode.Essayer de trouver le plus proche
td
comme ceci: