如何基于动态添加的类修改jQuery点击事件的滚动延迟？

首先得指出你原代码里的核心问题：你的条件判断是在页面初始化时就执行完毕的，这意味着只有页面加载瞬间的状态会被用来绑定点击事件——如果用户是之后才触摸屏幕添加的user-is-touching类，已经绑定好的点击事件不会自动更新。正确的做法是把状态判断放到点击事件的回调内部，让每次点击时都动态检查当前的类状态。

下面是完整的修正代码：

1. 触摸检测与滚动逻辑（JavaScript + jQuery） #

// 检测首次触摸，给body添加标识类
window.addEventListener('touchstart', function onFirstTouch() {
  document.body.classList.add('user-is-touching');
  // 只需要检测一次触摸，完成后移除监听
  window.removeEventListener('touchstart', onFirstTouch, false);
}, false);

// 点击事件：每次点击时动态判断当前设备状态
$(".o-c").click(function(e) {
  e.preventDefault(); // 阻止锚点链接的默认跳转行为
  // 根据body是否有touch类，决定延迟时间
  var delay = $('body').hasClass('user-is-touching') ? 5000 : 0;

  setTimeout(function() {
    $('html, body').animate({ 
      scrollTop: $(".one").offset().top 
    }, 2000);
  }, delay);
});

2. CSS 样式 #

.left {
  width: 50%;
  float: left;
  background: red;
  height: 100vh;
}
.right {
  width: 50%;
  float: right;
  background: green;
  height: 100vh;
}
.one {
  width: 100%;
  background: yellow;
  height: 100vh;
  display: block;
  clear: both;
}

3. HTML 结构 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
  <div class="left">
    <ul class="pivot-nav">
      <li class="pivot-nav-item">
        <a class="o-c default-underline custom-scroll-link" href="#one" data-toggle="my-scrollspy-2">1</a>
      </li>
    </ul>
  </div>
  <div class="right"></div> <!-- 补充原CSS定义但缺失的.right元素 -->
  <div class="one">
    Some more TEXT HERE
  </div>
</body>

关键改进说明： #

• 动态状态判断：把hasClass检查移到点击回调内，确保每次点击都能获取最新的body类状态，解决了原代码一次性绑定的问题。
• 阻止默认跳转：添加e.preventDefault()避免锚点的默认跳转打断自定义滚动逻辑。
• 简化代码逻辑：用三元运算符简化延迟时间的判断，让代码更简洁易读。
• 补全缺失元素：在HTML里添加了CSS中定义的.right元素，保证样式能正常渲染。

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