Android移动端网页按钮点击事件与Href链接失效问题解决

问题 #

页面中的两个切换div显示状态的按钮，在桌面端点击正常，但Android移动端无响应；页面内的href链接在移动端也无法正常跳转。需要实现桌面端和移动端均能正常工作。

现有代码 #

HTML #

<div class="content" id="calculator">
    <button id="details" class="tab-button">Details</button>
    <button id="result" class="tab-button">Result</button>

    <div id="details-content">
      Details
    </div>

   <div id="result-content" class="chart-container" onresize="responsiveFonts()">
        <canvas id="StackedbarChartCanvas"></canvas> 
   </div>
</div> 

<p class="center-text">Please read the <a class="link" href="disclaimer.php">Disclaimer</a></p>

CSS #

.tab-button{
  border-radius: 5px;
  border: 1px solid #000;
  padding: 5px 10px;
  background: yellow;
  font-size: 1em;
  cursor: pointer;
}

#details-content {
  display: block;
}

#result-content {
  display: none;
}

JavaScript #

$(document).ready(function() {
    $("#result").on("click", function(evt) {
      displayResultContent();
    });

    $(document).on('click', '#details', function() {
      displayDetails();
    });
  });

function displayResultContent() {
  document.getElementById("details-content").style.display="none";
  document.getElementById("result-content").style.display="block";
  calculateResult();
}

function displayDetails() {
 document.getElementById("details-content").style.display="block";
 document.getElementById("result-content").style.display="none";
}

修复步骤 #

1. 解决移动端按钮点击无响应 #

部分Android浏览器对纯click事件的支持存在延迟或失效问题，需要同时监听touchend事件，并避免事件重复触发：

修改JavaScript的事件绑定代码：

$(document).ready(function() {
    // 同时绑定click和touchend事件
    $("#result").on("click touchend", function(evt) {
      // 阻止默认行为和冒泡，防止重复触发
      evt.preventDefault();
      evt.stopPropagation();
      displayResultContent();
    });

    $(document).on('click touchend', '#details', function(evt) {
      evt.preventDefault();
      evt.stopPropagation();
      displayDetails();
    });
  });

2. 修复移动端链接跳转失效 #

链接跳转失效可按以下方式排查修复：

• 检查路径正确性：确认disclaimer.php与当前页面在同一目录，或改用绝对路径（如/disclaimer.php）。
• 移除全局阻止事件代码：如果页面其他JS存在全局阻止click事件的逻辑（如document.addEventListener('click', e => e.preventDefault())），需删除或给链接添加例外处理。
• 为链接添加触摸事件支持：给链接绑定touchend事件确保响应：

$(document).on('click touchend', '.link', function(evt) {
  evt.preventDefault();
  window.location.href = $(this).attr('href');
});

3. 额外优化 #

给按钮和链接添加触摸反馈，提升移动端体验：

.tab-button, .link {
  -webkit-tap-highlight-color: rgba(0,0,0,0.2); /* 自定义点击高亮，或设为transparent移除默认高亮 */
}

同时确保jQuery已正确引入，且版本兼容移动端浏览器（推荐使用3.x及以上版本）。

内容的提问来源于stack exchange，提问作者Lorna from Perth