在单击jquery上绑定两个事件答案

【问题标题】：bind two events on click jquery在单击jquery上绑定两个事件
【发布时间】：2020-09-17 22:56:04
【问题描述】：

我想创建一个简单的用户交互，只需一个按钮即可开始和停止录制音频，例如 whatsapp。我查看了stackoverflow以了解我是否错了，因为我知道不可能在同一个元素上绑定两个点击事件，所以我决定在codepen上测试代码，但它不会产生预期的结果：

$('#audioBtn').on('click' ,function(e){
  e.preventDefault();
  if( $(this).hasClass('active') ){
    $(this).removeClass('active')
    .addClass('inactive');
    console.log('Recording stopped');
  }
});

$('#audioBtn').on('click' , function(e){
  e.preventDefault();
  if( $(this).hasClass('inactive') ){
    $(this).addClass('active')
    .removeClass('inactive');
    console.log('Recording start');
  }
});

发生的事情是两个事件同时登录到控制台，但这不是我想要的，我只想在用户录制时使用相同的按钮开始和停止录制并更改图标音频。有没有办法做到这一点？

【问题讨论】：

为什么不使用else？
@CarlBinalla 我试过了，但是不行，我不知道是因为我在codepen上测试过还是因为它没有触发的事件
我建议你只有一个类（默认css的主动覆盖规则），并改用“toggleClass”。

标签： javascript jquery html

【解决方案1】：

我知道不可能在同一个元素上绑定两个点击事件

情况并非如此，完全可以将同一事件类型的多个事件处理程序绑定到单个元素。您的问题是因为两个处理程序相互冲突；一个设置类，另一个检测类并将其删除。

要解决这个问题，您需要使用一个事件处理程序来检测元素的状态并根据它进行更新。在您的情况下，一个简单的 else 语句将起作用。

$('#audioBtn').on('click', function(e) {
  e.preventDefault();
  if ($(this).hasClass('active')) {
    $(this).removeClass('active').addClass('inactive');
    console.log('Recording stopped');
  } else {
    $(this).addClass('active').removeClass('inactive');
    console.log('Recording start');
  }
});

更进一步，您可以使用toggleClass() 交换类：

$('#audioBtn').on('click', function(e) {
  e.preventDefault();
  
  if ($(this).hasClass('active')) {
    console.log('Recording stopped');
  } else {
    console.log('Recording start');
  }
  
  $(this).toggleClass('active inactive');
});

.active {
  color: #C00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="audioBtn">Start/Stop</button>

【讨论】：

非常感谢，它很有魅力，我可以使用.toggleClass() 来交换字体真棒图标吗？现在我正在使用这个代码$('#icon').removeClass('fas fa-microphone fa-2x') .addClass('fas fa-stop fa-2x');
是的，它会为此工作。您不需要在其中包含 fas 或 fa-2x 类，因为您删除然后将其添加回来，所以它是多余的。只需使用$('#icon').toggleClass('fa-microphone fa-stop');
如果你有时间，任何关于这个问题的建议都将不胜感激stackoverflow.com/questions/57900841/auto-scroll-chat-window

【解决方案2】：

为简单起见，您可以 toggleClass() 类：

$('#audioBtn').on('click' , function(e){
  e.preventDefault();
  $(this).toggleClass('active');
});

【讨论】：

选择代码并按CTRL+K，然后按CTRL+Return保存编辑

【解决方案3】：

我认为只有主动类就足够了。您可以检查是否处于活动状态，然后简单地切换它。您可以通过检查是否具有活动类的 id 来执行任何操作。

$('#audioBtn').on('click', function(e) {
  e.preventDefault();
  if ($(this).hasClass('active')) {
    $(this).toggleClass('active');
    console.log('Recording stopped');
  } else {
     $(this).toggleClass('active');
    console.log('Recording start');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="audioBtn"> click </div>

【讨论】：