时间戳

首页 > 解决方案 > 为什么这些按钮在点击手机后没有取消选择但在桌面上正常工作？

reactjs - 为什么这些按钮在点击手机后没有取消选择但在桌面上正常工作？

问题描述

为什么这个应用底部的四个按钮点击手机后没有取消选择？它们在桌面上正常工作。我一直在拔头发，试图弄清楚这笔交易是什么。

一个有趣的观点。Uber 按钮实际上是一个链接，而其余的是 s。

这是部署的应用程序（训练营的最终项目）： https ://sipspot.herokuapp.com/

这是 github 存储库： https ://github.com/charlesmbrady/Project3

如果您有任何想法，请告诉我。提前致谢！

以下是相关代码及其下方的相关 CSS：

        <div className="bottombar">
          { this.state.theCheckinLatitude === 0 ? (
            <button className="cntrl-btn" data-test="controls-checkin" onClick={ this.checkIn }>CheckIn</button>
          ) : (
              <button className="cntrl-btn" data-test="controls-checkin" onClick={ this.checkOut }>ChkOut</button>
            ) }
          <button className="cntrl-btn" data-test="controls-drink" onClick={ this.drinkTracker }>+Drink</button>
          <a id="uber-button" className="cntrl-btn" data-test="controls-uber" href="https://m.uber.com/ul/?action=setPickup&pickup=my_location" target="_blank" rel="noopener noreferrer">Uber</a>
          <button id="friends-button" className="cntrl-btn" data-test="controls-friends" onClick={ this.contactFriends }>Friends</button>
        </div>

相关元素的 CSS。这些display:项目是我能想象的唯一会对这个问题产生任何影响的部分。

.topbar>a, .topbar>button, .bottombar>a, .bottombar>button {
  background-color: #121212;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  display: inline-block;
  display: -moz-inline-box;
  width: 25%;
  padding: 10px;
}

标签： reactjsbutton

解决方案

这个解决方案非常简单，而且效果很好。将以下媒体查询放入您的 CSS 以在支持悬停的设备（通常是笔记本电脑/台式机）上显示悬停效果。像手机这样的“触摸”设备不会看到这个 CSS，也不会被绊倒。触摸设备不能很好地悬停，这最终导致了“按钮粘连”的出现。

@media (hover: hover) {
    /* code for devices that *support* hover (not mobiles) */
}

推荐阅读