javascript - 如何在不让列表/内容切换的情况下让我的静音取消静音功能在视频叠加元素上工作？

Question

该网站是一个简单的登录页面，带有自动播放的英雄视频背景，当您单击搜索框(位于视频的中心)时，它会取消静音并播放视频中的音频。我们的静音/取消静音按钮效果很好，但他们希望点击视频也能静音/取消静音。每当我将 video-overlay 的元素添加到该函数时，它上面的所有内容都可以作为我们不想要的静音/取消静音，它会破坏我们的搜索工具。

我已经尝试创建一个专门用于静音/取消静音的元素，但它仍然位于顶部，我已经尝试将不同的类添加到静音/取消静音功能 (Hero.onMuteClick)。我查看了 stopPropogation 但我无法弄清楚。

https://jsfiddle.net/kevingsp/9xhzr1by/2/

我希望点击 video-overlay 来静音/取消静音视频中的音频。

感谢阅读!

编辑/更新我按照下面的步骤操作并且成功了，我在 CSS 中使用 pointer-events:none; 使原来的静音/取消静音按钮不可点击，因此背景/覆盖层只能控制它。

谢谢!

Answer 1

为什么不用focus和focusout。看看下面的片段。

init: function() {
  $(".muteunmute").click(function(e) {
      Hero.onMuteClick();
  });
  $('#inputSearch').on('focus',()=>Hero.unmute() ).on('focusout',()=>Hero.mute() );
}

编辑

对不起，我误会你了。

希望下面的代码片段能满足您的需求 :)问题是所有元素都是“.video-overlay”的子元素，所以你必须检查哪个是真正的目标。

init: function() {
    $(".muteunmute").click(function(e) {
        Hero.onMuteClick();
    });
    $('.video-overlay').click(function(e){
      if($(e.target).hasClass('video-overlay-content'))
      {
            Hero.onMuteClick();
      }
    });
}