javascript - 执行一次鼠标悬停事件后解除它

Question

我正在尝试使用 mouseover 事件显示错误，但在显示错误后，我希望其他功能恢复但 mouseover 事件继续干扰。

另一个单击事件完美运行，但鼠标悬停事件在我单击之前出现。

我使用了 document.location.reload() 并取消了它。

但我想要一些东西而不重新加载页面。

let checkbtn = document.getElementById('checkbtn');
let cancelbtn = document.getElementById('cancelbtn');

const cubeIt=(num)=> num**3;
const numIt = (str)=> parseInt(str);
const addIt =(total, curr)=> total + curr;

const errorHandler=()=>{
    display.innerHTML = `<div class="result"><h2> Invalid input</h2> <h2>length</h2></div>`
}

const isArmstrong=(e)=>{

    let input = document.getElementById('input').value;
    let display = document.getElementById('display');
    let inputSplit = input.split("")
    let theMath = inputSplit.map(numIt).map(cubeIt).reduce(addIt);


    if(input.length == 3 && theMath == input){ 
        display.innerHTML = `<div class="result"><h2>TRUE</h2><h2> ${input} is Armstrong</h2></div>`
    }
    else if(input.length >= 4){
        document.getElementById('checkbtn').disabled = true

        checkbtn.addEventListener('mouseover', errorHandler, false)
        document.getElementById('checkbtn').removeAttribute('disabled');
    }
    else{
        display.innerHTML = `<div class="result"><h2>False</h2></div>`

    }
    e.preventDefault();
}

const toClear=()=>{
    let input = document.getElementById('input').value;
    let display = document.getElementById('display');
    let form = document.getElementById('form')
    form.reset();
    display.innerHTML =``;
}


checkbtn.addEventListener('click', isArmstrong);
cancelbtn.addEventListener('click', toClear);

标签： javascripthtmldommouseoveraddeventlistener

Answer 1

为什么不使用 Jquery .one()函数？它只会调用一次事件函数，然后删除侦听器。

如果您真的打算使用纯 js，那么您可以将其添加到您的事件回调函数中，

checkbtn.removeEventListener('mouseover', errorHandler, false);