如何实现点击按钮时触发.menuMesa下所有button的点击事件

你可以根据项目技术栈选择以下方案实现需求：

原生JavaScript实现 #

先给触发按钮添加标识（比如id="triggerAll"），再编写逻辑代码：

<!-- 新增的触发按钮 -->
<button id="triggerAll">触发所有骰子按钮点击</button>

<script>
// 获取触发按钮
const triggerBtn = document.getElementById('triggerAll');

// 绑定点击事件
triggerBtn.addEventListener('click', function() {
  // 选中.menuMesa下的所有按钮
  const diceButtons = document.querySelectorAll('.menuMesa button');
  
  // 遍历触发每个按钮的点击事件
  diceButtons.forEach(btn => {
    // 方式1：快速触发（适合大多数场景）
    btn.click();
    
    // 方式2：模拟真实点击事件（包含完整的事件冒泡、事件对象属性）
    // const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true });
    // btn.dispatchEvent(clickEvent);
  });
});
</script>

jQuery实现 #

如果项目已引入jQuery，代码会更简洁：

<button id="triggerAll">触发所有骰子按钮点击</button>

<script src="jquery.min.js"></script>
<script>
$('#triggerAll').click(function() {
  // 直接触发目标按钮的click事件
  $('.menuMesa button').trigger('click');
});
</script>

说明：原生方案无需额外依赖，适合轻量场景；jQuery写法更简洁，适合已引入jQuery的项目。如果按钮的点击逻辑依赖完整的事件对象，推荐用原生的dispatchEvent方式模拟真实点击。

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