html - 点击 ons-list-item 右侧的 ons-button 时删除列表效果

Question

我有如下列表:

<ons-list-item modifier="tappable" class="list-item" ng-repeat="item in items" ng-click="onItemSelect(item);">
     <ons-row>
          <ons-col width="105px">
              <img ng-src="{{item.thumb}}"></img>
          </ons-col>
          <ons-col>
          <div class="item-title">
              {{ item.name }}
          </div>
          </ons-col>
          <ons-col>
              <ons-button ng-click="onClick();">Add</ons-button>
          </ons-col>
     </ons-row>
 </ons-list-item>

点击列表后总会有效果，点击添加按钮时也是如此。

我想知道有什么方法可以消除点击列表右侧的添加按钮时的效果吗？

Answer 1

要在点击“添加”按钮时移除效果，您应该在该按钮上使用 modifier，如下所示:

<ons-button modifier="noeffect" ng-click="onClick();">Add</ons-button>

并为该按钮应用您的自定义 CSS:

.button--noeffect:active{/*Keep the background color the same on tap*/
    opacity:1;
}

检查这个codepen .

如果你想从你的列表项中移除点击效果，并且你只希望“添加”按钮在点击时起作用，那么只删除:modifier="tappable" 来自您的列表项。

OnsenUI 有一些标准 modifiers可以应用于按钮和列表项，但您也可以像上面那样创建自己的。