在javascript for html文件中触发具有可接受延迟的事件

triggering an event with edible delay in javascript for html file

本文关键字：可接受 延迟 事件 for javascript html 文件      更新时间：2023-09-26

我必须延迟触发一个事件。处理程序为正在读取的任何段落添加一个边框。用户可以更改延迟。当我添加超时时，边界永远不会显示，而如果没有超时，它会显示。如何延迟触发事件？

window.onload = function() {
   init();
}
function init() {
    for (var i = document.getElementsByTagName("P").length - 1; i >= 0; i--)         {
        document.getElementsByTagName("P")[i].addEventListener("mouseover",     setTimeout(re, document.getElementById("input").innerHTML));
        document.getElementsByTagName("P")[i].addEventListener("mouseout", rl);
    };
}
function re(e) {    
var id=e.target.id;
    document.getElementById(id).style.border = "thick solid blue";
}
function rl(e) {
 var id=e.target.id;
    document.getElementById(id).style.border = "none";
}

我认为根据setTimeout（）方法，第二个参数应该是The number of milliseconds to wait before executing the code。但在您的代码中似乎缺少。

尝试更改此行：

document.getElementsByTagName("P")[i].addEventListener("mouseover",     setTimeout(re, document.getElementById("input").innerHTML));

类似于以下内容：

document.getElementsByTagName("P")[i].addEventListener("mouseover",     setTimeout(re, 1000, document.getElementById("input").innerHTML));

希望这能解决问题！

尝试：-

document.getElementsByTagName("P")[i].addEventListener("mouseover", function(){ 
   var delay = document.getElementById("input").innerHTML; 
   setTimeout(re, parseInt(delay));
});

setTimeout是在添加侦听器时调用的，而不是在调用事件时调用的。

如果要获得文本框输入，必须使用id.value而不是id.innerHTML更改您的代码如下：

window.onload = function() {
   init();
}
function init() {
    for (var i = document.getElementsByTagName("P").length - 1; i >= 0; i--)         {
        document.getElementsByTagName("P")[i].addEventListener("mouseover",     setTimeout(re(this), document.getElementById("input").value));
        document.getElementsByTagName("P")[i].addEventListener("mouseout", rl(this));
    };
}
function re(e) { 
    e.style.border = "thick solid blue";
}
function rl(e) {
    e.style.border = "none";
}
相关文章：