删除侦听器类不会停止与 Jquery Javascript 相关的声音事件

Posted

技术标签:

【中文标题】删除侦听器类不会停止与 Jquery Javascript 相关的声音事件【英文标题】:Removing a listener class doesn't stop a sound event associated Jquery Javascript 【发布时间】:2016-11-10 12:04:43 【问题描述】:

我在将鼠标悬停在图像上时播放声音(这已经可以正常工作了),并且希望包含一个按钮以在需要时将其关闭。不幸的是,我无法让它工作。

我当前的代码如下:

用于创造声音

//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”),所以我累了:

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

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

虽然后一个脚本确实成功删除了“播放”类,但每次我将鼠标悬停在图像上时,声音都会继续播放。我错过了什么?声音不应该停止播放吗?

您还有其他解决方案吗?

干杯

【问题讨论】:

【参考方案1】:

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

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

或者,如果您想根据类切换声音功能,您可以保留当前逻辑并检查元素在mouseover 处理程序中是否仍然具有类:

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

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

【讨论】:

Rory 非常感谢我现在明白为什么这两种方法都有效!不幸的是,我刚刚注意到,考虑到我在 Rails 中的应用程序的设计方式(每次单击该徽标图像时它都会重新加载页面),以这种方式关闭声音在重新加载时不会持续存在。你知道有什么方法可以坚持这样的改变吗?也许是什么东西一起禁用了浏览器的声音? 不幸的是,你不能从 JS 中做到这一点。如果您想保留设置,您可以使用 localStorage 或 cookie 来保留“静音”按钮的状态 好吧,不用担心,我期待会是这样!无论如何,您的回答非常有帮助。我将尝试使用 cookie 或会话中的变量来执行此操作。如果将来有人使用此答案,我将在您的第二种方法中进行一些不正确的编辑。干杯

以上是关于删除侦听器类不会停止与 Jquery Javascript 相关的声音事件的主要内容,如果未能解决你的问题,请参考以下文章

jQuery事件捕获停止传播

JQuery 添加元素,包括删除侦听器

使用 JQuery 在 Droppend 时停止删除可拖动元素

javaweb的监听器导致服务停止运行

使用名称中的点调度 CustomEvent 不会触发 jQuery.on() 事件侦听器

使用任务取消令牌停止 TCP 侦听器