web-dev-qa-db-ja.com

Angular ng-click $ eventは子要素をターゲットとして渡します

テーブルのtd要素ごとに、ng-clickがアタッチされています。以下は、各テーブルセルの（簡略化された）htmlです。

<td ng-click="cellClicked($event)">
    <span ng-if="!cellEdit">{{event.eventName}}</span>
    <input type="text" ng-if="cellEdit" ng-model="event.eventName">
</td>

そして、私の（単純化した）ng-click関数：

scope.cellClicked = function (event) {
  rowScope.cellEdit = true
  angular.element(event.target).find('input').focus()
}

その私の目標：

  1. ユーザーが表のセルをクリックする
  2. セルが「編集モード」に変わります
  3. input要素（td内にある）にフォーカスを移動します。

現在、これは、ユーザーがtd要素の内側をクリックし、span要素をクリックしない限り機能します。

console.log(angular.element(event.target)) #--> [td...] (as desired)

ただし、ユーザーがtd内のspan要素をクリックした場合：

console.log(angular.element(event.target)) #--> [span...]

この使用例では、フォーカスの割り当ては機能しません。 spanの親要素にアクセスして、次のようなことを望んでいました：

angular.element(event.target.closest('td'))

または

angular.element(event.target.parentNode)

ただし、要素が$ eventを介して渡され、親コンテキストがない場合にアクセスされると表示されます。

どうすればよいですか：

  • span要素をクリックしないようにし、tdのng-clickを発火させる
  • span要素をクリックすると、そのhtml親を通過します
javascriptjqueryhtmlangularjs
14
Cumulo Nimbus

変化：

angular.element(event.target)

に：

angular.element(event.currentTarget)

私の問題を修正しました。

大部分の使用例では、 event.currentTarget を使用する方が event.target よりも好ましいようです。

20
Cumulo Nimbus

_event.target_はDOM要素であり、メソッドclosestがないため、event.target.closest('td')は機能しません。このメソッドを使用するには、jQueryオブジェクトを作成する必要があります。

次のように最も近いtdを見つけてください：

_angular.element(event.target).closest('td')
_
3
dfsq

Angular 7.x

myClickHandler($event) {
    this.selectedElement = <Element>$event.target.closest('.list-item');
}

html：

<div class="list-item" (click)="myClickHandler($event)">...</div>
3
David Dehghan