刪除監聽器類並不會停止與聲音相關的事件Jquery Javascript

Question

我在播放聲音時將鼠標懸停在圖像上（此工作正常），並且希望包含一個按鈕以在需要時關閉此功能。不幸的是，我無法使它工作。

我當前的代碼是這樣：

爲了創建聲音

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

var mouseoversound = createsoundbite('mysound.mp3') 

對於觸發它

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

listener元素

<%= 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. 

後者雖然腳本不會成功地刪除類‘玩’的聲音一直播放，每次我將鼠標懸停在圖像的時間。我錯過了什麼？不應該聲音停止播放？

您是否看到其他解決方案？

乾杯

Answer 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"); 
});