移动端浏览器中jQuery click()失效，使用vclick()报错求助

原始代码 #

<button class="proceed">
    <div class="text-sm-bold clr-white" onclick="proceedBook()">PROCEED FOR BOOKING</div>
</button>
<button id="hid-cb" hidden type="submit" class="proceed-btn" name="conform-booking">PROCEED FOR BOOKING</button>

<script>
const proceedBook = () => { $("#hid-cb").click() }
</script>

问题描述 #

$("#hid-cb").click() 调用在移动端浏览器中无法触发隐藏提交按钮的点击事件，导致表单无法提交。

尝试方案及报错 #

尝试使用jQuery的vclick()方法替代：

const proceedBook = () => { $("#hid-cb").vclick() }

触发以下错误：

error: Uncaught TypeError: $(...).vclick is not a function

可行解决方案 #

• 直接提交表单
  既然目标按钮是type="submit"，直接找到其所属表单调用submit()方法，跳过模拟点击环节，兼容性更强：

  const proceedBook = () => {
    $("#hid-cb").closest('form').submit();
  }
  

• 使用原生JS触发点击
  原生DOM元素的click()方法在移动端兼容性优于jQuery封装版本，直接调用：

  const proceedBook = () => {
    document.getElementById('hid-cb').click();
  }
  

• 优化DOM事件绑定
  原代码将点击事件绑定在按钮内部的<div>上，可能引发移动端事件冒泡异常。直接把onclick绑定在外层按钮上：

  <button class="proceed" onclick="proceedBook()">
      <div class="text-sm-bold clr-white">PROCEED FOR BOOKING</div>
  </button>
  

• 兼容触摸事件
  针对移动端触摸场景，手动触发触摸事件后再执行点击，避免触摸与点击事件的兼容性问题：

  const proceedBook = () => {
    const submitBtn = document.getElementById('hid-cb');
    if (!submitBtn) return;
    
    if ('ontouchstart' in window) {
      submitBtn.dispatchEvent(new Event('touchstart'));
    }
    submitBtn.click();
  }
  

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