页面需要双击按钮

在一些交互复杂的界面中，单击按钮可能会产生意想不到的后果，为避免误操作，在一些情况下需要将按钮设置为需要双击才能触发事件。

实现方式

使用JavaScript实现

<button id="doubleClickBtn" onclick="onSingleClick()">双击我</button>

<script>
let clickCount = 0;

function onSingleClick() {
  clickCount++;
  if (clickCount === 1) {
    setTimeout(function () {
      if (clickCount === 1) {
        console.log("single click");
      } else {
        console.log("double click");
      }
      clickCount = 0;
    }, 300);
  } else {
    clickCount = 0;
  }
}
</script>

使用第三方库

• jQuery-doubleTap

<button id="doubleClickBtn">双击我</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://raw.githubusercontent.com/zenopopovici/jquery-doubleTap/master/jquery.doubleTap.js"></script>
<script>
$("#doubleClickBtn").doubleTap(function() {
  console.log("double tap");
});
</script>

总结

双击按钮可以避免误操作，是一种良好的用户体验设计。实现方式可以通过JavaScript手动管理点击次数，或者集成第三方库快速实现。