javascript - 使用 ng-click 进行切换适用于桌面设备，但不适用于移动设备

Question

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

这在桌面上工作正常，但在移动设备上，当我单击时，过滤器会被正确选择(并且结果会正确过滤)，但当我再次单击时，过滤器仍保持选中状态，从而破坏了用户体验。如果我再次点击其他内容，过滤器将完全取消选择，因为它应该 - 一键点击迟到......;)

可能出了什么问题？我也尝试安装 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);
      }
    }
}

Answer 1

这是一个冲突的 CSS 条目。

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

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

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

为了支持任何触摸设备。