Question

我用手机制作了一个简单的卡系统。

当我使用以下代码时，触摸事件检测效果很好。

html, body {
  margin: 0;
  padding: 0;
}
.card1 {
  height: 200px;
  width: 200px;
  background-color: green;
}
.card1:active {
  background-color: blue;
}

<html>
<body ontouchstart="">
  <div class="wrap">
    <div class="card1"></div>
   </div>
</body>
</html>

不仅在移动设备中，而且在台式机上也能正常工作。

但是从屏幕上松开手指后，它会返回到原始状态。

我的目标是，如果我点击触摸框，框将更改为background-color: blue;，而不必返回background-color: green;

这里有什么解决办法吗？

谢谢。

Answer 1

可以通过使用js在click事件上应用背景颜色来实现

$('.card1').click(function() {
    $('.card1').css({
        'background-color': 'blue',        
    });
});

html, body {
  margin: 0;
  padding: 0;
}
.card1 {
  height: 200px;
  width: 200px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body ontouchstart="">
  <div class="wrap">
    <div class="card1"></div>
   </div>
</body>
</html>

移动设备使用CSS触摸事件

1 个答案: