javascript - 添加音频播放器，启用和禁用选项卡

Question

在这个博客中，我发现了一个有趣的效果，我将其应用到使用页脚属性的编程实践中。效果是滑动页脚，就像我为其编程的选项卡一样。

现在的问题是，如果我在选项卡上方添加一个音频播放器，当我想开始音频播放时，选项卡滑动到单击我的播放器例如单击播放或停止，我想要的是只有这个激活FOOTER 选项卡单击它进行滑动，而不是音频播放器在滑动时不执行任何 Action ，只有当我单击它时才播放。 代码如下:

HTML

<span class="fTab">
   <!- - AUDIO- - >
   <section id="repro">
    <audio controls="controls" autoplay>
     <source src="music.mp3" type="audio/mpeg" />  
    </audio>
   </section>

    ***CONTENT***

 </span>

 <footer>
    <section class="credit">

      <div id="slideout_inner">    

        **CONTENT**

      </div>

    </section>
 </footer>

JavaScript

jQuery(function($){
  $('.fTab').on('click', function(){
    $(this).toggleClass('active');
  });    
})

css很长，因为它不是很重要。重要的是 javascript，因为它将执行滑动 FOOTER 的效果。

希望大家明白我说的话，希望大家帮忙。谢谢

Answer 1

您可以使用stopPropagation 。如果单击 #repro 元素，则 $(this).toggleClass('active'); 将不会被触发。

The event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.

$("#repro").click(function(event){
    event.stopPropagation();
});