Question

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

另一个click事件运行正常，但是在我单击之前显示了鼠标悬停事件。

我使用了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);

Answer 1

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

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

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

执行一次后取消鼠标悬停事件

1 个答案: