Question

在来到这里之前，我做了谷歌搜索，这可能是一个错误，但我想先得到第二个意见，也许我只是写错了代码。

我正在创建一个带有自定义控件的音频播放器。当我单击PLAY / PAUSE按钮时，出现此错误：

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;
        }
    }

Answer 1

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

命名函数声明被提升到顶部，但是当createControls运行时，你使用相同的名字而不使用var关键字，所以名称playPause不再引用该函数，而是指按钮元素。

Answer 2

现有答案是正确的，但是我发现很难在我一直在研究的大型Web应用程序中真正找到此问题。最后，我用它来捕捉它：

const EventTargetPrototype = document.__proto__.__proto__.__proto__.__proto__;
const origAddEventListener = EventTargetPrototype.addEventListener;
EventTargetPrototype.addEventListener = function addEventListenerWrapper(type, listener) {
    if (typeof listener !== 'function') throw new Error('bad listener for ' + type);
    return origAddEventListener.apply(this, arguments);
};

TypeError：属性'handleEvent'在FIREFOX中不可调用

2 个答案: