web-dev-qa-db-ja.com

AngularJS-複数のng-click-イベントバブリング

次の例では：

_  <li ng-repeat="item in items" ng-click="showItem(item)">
    <h3>{{item.title}}</h3>
    <button ng-click="remove(item)">Remove</button>
  </li>
_

ボタンをクリックすると、イベントバブリングのためshowItem()も呼び出されます。 _$event_を使用して_$event.currentTarget_を監視し、$event.stopPropagation()などを実行できることを知っていますが、これは非常にいです。

ところでbuttonでの伝播を停止したくない（私の場合、buttonは_Twitter bootstrap_ _dopdown/button_です-これは単なる例です）

removeボタンをクリックしたときにshowItem()が呼び出されないようにするにはどうすればよいですか？

[〜＃〜] edit [〜＃〜] ugい修正は次のようにすることです：

_function remove(item,$event){
  $event.originalEvent.prevent = true;
  // rest of the code
}

function showItem(item,$event){
  if($event.originalEvent.prevent)return;
  // rest of the code
}
_
eventsjavascript-eventsangularjsangularjs-ng-repeatangularjs-ng-click
41
g00fy

この解決策は私のために働いた（私は最近のブラウザのみをサポートしているので、よりレトロな互換性を持つようにコードを修正しようとした）：

HTML：

<li ng-repeat="item in items" ng-click="showItem(item)">
    <h3>{{item.title}}</h3>
    <button ng-click="remove(item, $event)">Remove</button>
</li>

スクリプト：

function remove(item, $event) {
    // do some code here

    // Prevent bubbling to showItem.
    // On recent browsers, only $event.stopPropagation() is needed
    if ($event.stopPropagation) $event.stopPropagation();
    if ($event.preventDefault) $event.preventDefault();
    $event.cancelBubble = true;
    $event.returnValue = false;
}
function showItem(item) {
    // code here
}

[〜＃〜] edit [〜＃〜]-JSFiddleデモを追加して試してみました http://jsfiddle.net/ 24e7mapp/1 /

64
Tibo

showItemは、itemで渡されたものがもう存在しない場合、早期に戻るように更新できます。

function remove(item) {
  if (-1 == $scope.items.indexOf(item)) {
    // Item no longer exists, return early
    return;
  }
  // Rest of code here
}
0
Hector Virgen