javascript - TypeError:属性 'handleEvent'在FIREFOX中不可调用

在来到这里之前，我对此进行了Google搜索，这可能是一个错误，但是我想先提出第二个意见，也许我只是在编写错误的代码。

我正在创建带有自定义控件的音频播放器。当我单击“播放/暂停”按钮时，出现以下错误:

TypeError:属性“handleEvent”不可调用。

我的“倒带10秒”按钮或“循环”按钮上不会发生此错误

HTML:

<audio id="audio" controls style="width:800px;">
    <source src="myAudio.mp3" type="audio/mp3">
</audio>

<div id="media-controls">
    <button type="button" id="play-pause" class="paused" >PLAY/PAUSE</button>
    <button type="button" id="rewind10" >REWIND 10 SECONDS</button>
    <button type="button" id="loop" >LOOP</button>
</div>

JS:

var track = document.getElementById('audio');
createControls();

function createControls(){
        playPause = document.getElementById("play-pause");
        rewindBTN = document.getElementById("rewind10");
        loopBTN = document.getElementById("loop");

        playPause.addEventListener("click",playPause);

        loopBTN.addEventListener("click",loopToggle);

        rewindBTN.addEventListener("click",rewindTenSeconds);

    }

    function playPause(){
        if(track.paused){
            track.play();
        } else {
            track.pause();
        }
    }

    function rewindTenSeconds(){
        track.currentTime = track.currentTime - 10;
    }

    function loopToggle(){
        if (track.loop ==  false){
            track.loop = true;
        } else{
            track.loop = false;
        }
    }

最佳答案

您正在使用名为playPause的变量覆盖名为playPause的函数。

命名的函数声明被提升到顶部，但是当createControls运行时，您将使用相同的名称而不使用var关键字，因此名称playPause不再引用该函数，而是引用button元素。