删除侦听器 class 不会停止关联的声音事件 Jquery Javascript

Question

我在将鼠标悬停在图像上时正在播放声音（这已经可以正常工作了）并且想要包含一个按钮以在需要时将其关闭。不幸的是我没能成功。

我当前的代码如下：

用于创建声音

//a bunch of code to generate the audio that ends on

var mouseoversound = createsoundbite('mysound.mp3')

触发

  $(".play").mouseover(function() {
      mouseoversound.play();
    });

监听器元素

<%= image_tag "image.png", class:'logo-image play' %>

我认为禁用它的最简单解决方案是删除元素侦听器中事件（即'.play'）的class 'listening'，所以我累了：

  $(".sound").click(function(){
    $(".logo-image").removeClass("play");
  });

//.sound is the class of the button that's intended to block it.

尽管后一个脚本确实成功删除了 class 'play' 每次我将鼠标悬停在图像上时声音都会继续播放。我错过了什么？声音不应该停止播放吗？

您是否看到任何其他解决方案？

干杯

Answer 1

问题是因为事件处理程序绑定到元素。在事件绑定后删除 class 不会影响该绑定。要影响事件处理程序，您可以调用 off()，如下所示：

$(".sound").click(function(){
    $(".logo-image").off('mouseover');
});

或者，如果您想切换基于 class 的声音功能，您可以保持当前逻辑并检查元素是否仍然具有 mouseover 中的 class处理程序：

$(".logo-image").mouseover(function() {
    if ($(this).hasClass('play') {
        mouseoversound.play();
    }
});

$(".sound").click(function(){
    $(".logo-image").toggleClass("play");
});

删除侦听器 class 不会停止关联的声音事件 Jquery Javascript

Removing a listener class doesn't stop a sound event associated Jquery Javascript

javascript

audio

jquery

mouseover