页面audio元素点击无法播放，已阻止翻页仍未解决的技术求助

你的问题出在事件冒泡的处理逻辑上，原代码通过检测点击位置元素来终止翻页逻辑的方式不仅不可靠，还可能干扰音频元素的默认交互行为。

问题根源 #

点击音频控件（如播放按钮）时，事件会从控件元素向上冒泡到<audio>，再到父级的.page元素。原代码用document.elementsFromPoint检测元素的方式存在缺陷：音频的内置控件属于Shadow DOM节点，elementsFromPoint可能无法直接捕获到<audio>元素本身，导致判断失效；即便检测到并终止翻页，也可能因为事件处理顺序问题，阻断了音频的默认播放逻辑。

正确解决方案 #

直接阻止<audio>元素及其内部控件的事件冒泡，让它们的点击事件不会传递到.page元素，这样既保留音频的正常交互，又不会触发翻页。

修改后的代码

$('.page').click(function(e) {
  var page = $(this);
  var page_num = pages.index(page) + 1;
  if (page_num % 2 === 0) {
    page.removeClass('flipped');
    page.prev().removeClass('flipped');
  } else {
    page.addClass('flipped');
    page.next().addClass('flipped');
  }
});

// 阻止音频元素的点击事件冒泡到页面
$('.page').on('click', 'audio, audio *', function(e) {
  e.stopPropagation();
});

代码说明 #

• 移除原代码中那段检测点击位置元素的逻辑，避免干扰默认事件。
• 使用事件委托的方式，监听.page内所有<audio>元素及其子元素的点击事件，调用e.stopPropagation()阻止事件向上冒泡，这样.page的点击翻页逻辑就不会被触发。
• 事件委托的写法比直接给每个<audio>绑定事件更高效，尤其适合页面中有多个音频元素的场景。

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