ionic

ionic 下の要素までイベントが発生してしまう場合

  • このエントリーをはてなブックマークに追加
  • LINEで送る
ionicハイブリッドアプリ開発

ionicで開発をしていると、時々発生してほしくないイベントが発生してしまうことが有ります。

例えば、
子要素までイベント発火

こんなリスト表示は、ionicで開発しているとよく使う場面でしょう。
リスト本体をタップしたときのイベントと、右端のボタンをタップしたときで処理を分けたい時、リスト本体は問題無いのですが、ボタンをタップすると、ボタンの下のリストもタップした事になり、イベントが2つ発生してしまいます。
HTMLのコード

<ion-view view-title="一覧">
  <ion-content>
    <div class="list">
        <a class="item item-button-right" href="#" ng-repeat="roll in data" ng-click="viewDitail(roll.id)">
          <h2>{{roll.name}}</h2>
          <p>{{roll.datep}}提出</p>
          <button class="button button-balanced" ng-click="editRepo(roll.id)"><i>修正</i></button>
        </a>
    </div>
  </ion-content>
</ion-view>

リスト本体をクリックすると、viewDitai(roll.id)が実行されます
右端のボタンをクリックすると、editRepo(roll.id)が実行されます

javaScript

    $scope.viewDitail = function(repoId){
      $log.info("詳細を表示する ID:"+repoId);
    }
    $scope.editRepo = function(repoId){
      $log.info("作成した内容を編集する ID:"+repoId);
    }

それぞれ次のように関数を書きました。
実際にボタンをクリックすると
子要素のイベントが親に伝わってしまう

このように、子要素(ボタン)のイベントが、親(リスト)にまで伝わってしまい、意図しない結果になってしまう。

解決策は、e.preventDefault()を使う方法も有りますが、ionicの場合はもっと簡単です。
子要素に、ion-stop-event=”click”を付けるだけです。

<ion-view view-title="一覧">
  <ion-content>
    <div class="list">
        <a class="item item-button-right" href="#" ng-repeat="roll in data" ng-click="viewDitail(roll.id)">
          <h2>{{roll.name}}</h2>
          <p>{{roll.datep}}提出</p>
          <button ion-stop-event="click" class="button button-balanced" ng-click="editRepo(roll.id)" ><i>修正</i></button>
        </a>
    </div>
  </ion-content>
</ion-view>

これで、子のイベントが親に伝わらなくなります

  • このエントリーをはてなブックマークに追加
  • LINEで送る

ionicで「サロンカルテ」アプリを作りました

ionicを使えば、スマートフォンやタブレット向けアプリが簡単に作成できます。
例えば弊社が開発した「サロンカルテ」は、AndroidタブレットやiPad上で動作する、美容室・ネイルサロン向けの施術管理システムです。
ionicはスマートフォン向けの開発環境ですが、工夫することでタブレットでも最適なレイアウトにすることができます

サロンカルテのアプリを見てみる