如何检测对离子项目内元素的点击？答案

【问题标题】：How to detect clicks on an element inside an ion-item?如何检测对离子项目内元素的点击？
【发布时间】：2015-09-10 10:32:22
【问题描述】：

使用 ion-list 和 ion-item，我无法检测到对按钮或 div 等元素的点击。

例如，使用 ng-click 在这里不起作用：

<ion-list>
      <ion-item ng-repeat="device in devices">
          <div ng-click="deviceOption(device.id)"> CLICK HERE</div>                                            
      </ion-item>
</ion-list>

我尝试使用 ion-option-button 代替，但使用起来并不简单。

为什么我们不能有一个简单的 ion-button 指令来检测 ion-item 内的点击？

【问题讨论】：

你的意思是ng-click 在这里不起作用？
确实，ng-click 在这里不起作用
请添加一个codepen
您是否尝试过将 ngClick 直接放在 ion-item 而不是子 div 上？
就是这样：我不想对点击整个项目做出反应（顺便说一句，这很好用）；我希望能够根据用户单击的项目元素触发不同的回调

标签： ionic-framework ionic

【解决方案1】：

有史以来最简单的方法！只需将事件更改为“点击”

<ion-list>
          <ion-item ng-repeat="device in devices">
              <div on-tap="deviceOption(device.id)"> CLICK HERE</div>                                            
          </ion-item>
</ion-list>

【讨论】：

【解决方案2】：

因此问题与ion-item 更改内部z-index 的div 和点击无法传播有关。你可以轻松绕过它，更改内部div的z-index：

<ion-content class="padding">
  <ion-list>
    <ion-item >
      <div style="z-index: 1000;" ng-click="test()"> CLICK HERE</div>                                            
    </ion-item>
  </ion-list>
</ion-content>

angular.module('app', ['ionic']).controller('ctrl', function($scope){
  $scope.test = function(){
    alert('hello');
  };
})

查看游乐场：http://play.ionic.io/app/6227e101719b

【讨论】：

对于未来的搜索者：我的问题是 $scope，而不是 z-index。
也会发生同样的事情。我也想点击离子滚动框和内部项目？

【解决方案3】：

我遇到了同样的问题

使用 'on-tap' 而不是 'ng-click' 解决了这个问题！

【讨论】：

【解决方案4】：

添加 enable-pointer-events 类应该可以做到。

<ion-list>
  <ion-item ng-repeat="device in devices">
      <div class="enable-pointer-events" ng-click="deviceOption(device.id)"> CLICK HERE</div>                                            
  </ion-item>

【讨论】：