使用 ng-click 切换适用于桌面，但不适用于移动设备答案

【问题标题】：Toggling with ng-click works on desktop, but not on mobile使用 ng-click 切换适用于桌面，但不适用于移动设备
【发布时间】：2016-06-01 16:16:13
【问题描述】：

我的页面顶部有一个过滤器行。单击时，给定的过滤器会过滤结果，并突出显示（特定类）。再次单击时，应清除该类，并且在视觉上取消选择过滤器。

这在桌面上运行良好，但在移动设备上，当我点击时，过滤器被正确选择（并且结果被正确过滤），但是当我再次点击时，过滤器保持选中状态，破坏了用户体验。如果我再次单击其他内容，过滤器将完全取消选择 - 单击即可延迟... ;)

可能出了什么问题？我也尝试安装 ngTouch 模块，但似乎没有任何改变。

HTML：

section.filter-area
  .col-xs-3.filter-row(ng-repeat="flt in vm.filters")
    .filter(ng-click="vm.filter(flt)" ng-class="{'selected': flt.isSelected}")
      .filter-title {{flt.tag}}
      .filter-icon
        img.filters(src="{{flt.icon}}")

js:

'use strict';

Controller.$inject = ['$http'];

function Controller($http) {
      /* other stuff */
      vm.filter = function(flt) {
      if (flt.isSelected === undefined) {
        flt.isSelected = false;
      }

      flt.isSelected = !flt.isSelected;

      if (flt.isSelected) {
        activeFilters += 1;        
        filterProducts(flt);
      } else {
        activeFilters -= 1;
        unselectFilter(flt);
      }
    }
}

【问题讨论】：

调试时我可以看到属性isSelected 正确设置为false，所以我不明白为什么移动设备不删除'selected' 类？

标签： javascript angularjs mobile

【解决方案1】：

这是一个冲突的 CSS 条目。

我有相同的悬停和选择规则，这导致了移动设备上的冲突，因为移动设备不支持悬停。

.filter:hover, .filter:selected {
   background-color: #ccc;
   color:white;
}

因此，我在媒体查询上移动了悬停规则，并应用了这个解决方案 https://stackoverflow.com/a/6262682/169252

为了支持任何触控设备。

【讨论】：