如何用JavaScript实现首次点击和二次点击分别触发不同动作的效果

最推荐的方式是通过切换CSS类实现，样式和逻辑分离，可维护性更高： #

方案1：CSS类切换实现（推荐） #

完整示例代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    .move-box {
      width: 100px;
      height: 100px;
      background: #42b983;
      position: absolute;
      left: 20px;
      top: 50px;
      /* 平滑过渡动画，不需要可以删除 */
      transition: left 0.3s ease;
      cursor: pointer;
    }
    /* 右移状态的类 */
    .move-box.right {
      /* 100vw是视口总宽度，减去自身宽度+初始左边距，避免超出屏幕 */
      left: calc(100vw - 120px);
    }
  </style>
</head>
<body>
  <div class="move-box">点击移动</div>

  <script>
    const moveBox = document.querySelector('.move-box');
    moveBox.addEventListener('click', () => {
      // toggle方法自动添加/移除类，不需要手动维护状态
      moveBox.classList.toggle('right');
    });
  </script>
</body>
</html>

方案2：JS直接控制样式+状态变量 #

如果你不想额外写CSS类，也可以直接用JS维护状态变量控制样式：

const moveBox = document.querySelector('.move-box');
// 初始化状态：默认在左侧
let isLeft = true;

moveBox.addEventListener('click', () => {
  if (isLeft) {
    moveBox.style.left = 'calc(100vw - 120px)';
  } else {
    moveBox.style.left = '20px';
  }
  // 翻转状态
  isLeft = !isLeft;
});

注意事项 #

• 如果需要基于父元素移动，把100vw替换为父元素的宽度即可，也可以改用transform: translateX()实现位移，性能更好。
• 示例中的位置数值可以根据你的实际需求调整。

内容的提问来源于stack exchange，提问作者NetBo