7

コードは 1000 語よりも優れているため、問題を示すためにプランカーを作成しました: http://bit.ly/1uiR2wy

特定の DOM 要素を考えると、ng-change を含む入力チェックボックスがあるため、それをラップする li に ng-click を追加して、領域全体をクリックできるようにしたいと考えています。この新しい ng-click により、ng-change のメソッドが 2 回発生します。そして、3 回発生している SPAN DESCRIPTION 2 の場合はさらに悪化します。

<li class="odd" ng-click="changeToggleModel($event)">
  <span class="overcomeDescription ellipsis-overflow">span description</span>
  <label>      
    <span>SPAN DESCRIPTION 2</span>
    <input type="checkbox" ng-change="toggleSelection($event)" ng-model="isSelected">
  </label>
</li>

stopPropagation を試しましたが、問題が解決しないようです。それについてのアイデアはありますか？プランカーを確認してコンソールを開くと、問題が完全に表示されます。

みんなに前もって感謝します

4

2 に答える 2

13

ラベルレベルでイベントの伝播を停止する必要があります。これを試して：

<label ng-click="$event.stopPropagation()" ...>

デモ: http://plnkr.co/edit/AjD9GlA3zjxABix6hegg?p=preview

これが発生する理由は、(対応するチェックボックスに接続された) ラベルが、クリックを入力に渡すために、もう 1 つのクリック イベントを生成するためです。ngClickこのクリック イベントは、通常のイベントのようにまだ泡立ち (通常のイベントです)、ディレクティブによって検出されるため、前述の奇妙な問題を引き起こします。

于 2014-11-16T22:14:17.600 に答える
1

パーティーに遅れましたが、同じ問題が発生しました.AngularJSはクリックイベントを個別かつ明示的に伝播しているようです. ラベルで伝播を停止する代わりに、入力で明示的にキャッチできます。

    <input 
      type="checkbox"
      ng-click="$event.stopPropagation()"
      ng-change="toggleSelection($event)"
      ng-model="isSelected"
    >
于 2017-05-08T20:44:52.653 に答える