Question

我已经制作了一个带按钮的列表（<p>）。当我将鼠标移到它们上面时，它会延迟1,2秒，然后我的文本框被标记为黄色以显示我可以写入的位置。当我移开鼠标时，它们会变为正常（白色）。

我的问题是，当我快速将鼠标悬停在按钮上来回时，很多文本框都会被标记出来。我曾希望1,2秒延迟会有效，但事实并非如此。但是如果我慢慢地将鼠标移入和移出按钮，它就会起作用。

这是我的JavaScript代码

$(function () {
    $("p.pRespRoleId").mouseenter(function () {
        var timeOut = 1200;
        $this = $(this);
        $this.data("delay", setTimeout(function () {
            mouseInRespRoleId();
        }, timeOut)
             );
    })


.mouseleave(function () {
       $this = $(this);
       if ($this.next(mouseOutRespRoleId()).is(":visible")) {
           clearTimeout($this.data("delay"));
           mouseOutRespRoleId();
       }
       else {
           $this.next("p.pRespRoleId").show();
       }
   });

});

和

function mouseInRespRole() 
            {
            var txtInRespRole = document.getElementById("<%=txtRespRoleName.ClientID %>");
                txtInRespRole.style.background = "#FFFF00";
                if (document.getElementById('txtRespRoleName').value == '') 
                {
                    document.getElementById('txtRespRoleName').innerHTML = txtInRespRole;
                    return false;
                }
            }


            function mouseOutRespRole() 
            {
            var txtOutRespRole = document.getElementById("<%=txtRespRoleName.ClientID %>");
                txtOutRespRole.style.background = "white";
                if (document.getElementById('txtRespRoleName').value == '') 
                {
                    document.getElementById('txtRespRoleName').innerHTML = txtOutRespRole;
                    return true;
                }
            }

Answer 1

你的jsFiddle肯定会让我感到困惑（我不确定你想要达到的目标 - 你有可能让事情过于复杂）。我希望我的要求合适......

无论如何，我相信你的逻辑是正确的，但实施中存在一些缺陷。因此，here是jsFiddle的修改（并且部分修正）版本，它完成了（我相信）你想要实现的目标。

你使用'$ this.next（mouseOutRespRoleId（））。是（“：visible”）'肯定是最令人困惑的，所以我完全删除了它。（如果它正在实现其他一些目的，那么你将不得不提供更详细的描述。）

主要问题是$this.next(mouseOutRespRoleId()).is(":visible")从未评估为真，因此从不清除调用mouseInRespRoleId()的计时器。

修改：
我更新了我的jsFiddle illustration，以便它处理IE9的奇怪行为（a.k.a. bug（？））。现在它应该没有闪烁对问题的简短解释：
另外，在IE9中，鼠标事件生成有一些“时间问题”，因此当进入（mouseOver）并快速离开（mouseOut）一个组件时，有时鼠标事件顺序会搞砸。例如： -
以下事件序列（即实际事件）：

mouseOver -> mouseOut -> mouseOver

可能产生以下（显然是错误的）javascript事件序列（即IE9中由JS引擎触发的事件）：

mouseOver -> mouseOver(!) -> mouseOut(!)

因此，我在“mouseentered”处理函数中添加了一个额外的clearTimeout($this.data("delay"))，以便清除“mouseInRespRoleId”的任何挂起的预定执行。它在IE9上（并且可能是IE的早期版本 - 未经测试）不能很好地工作，但它可以获得（afaik）。

（注意：它仍然可以在其他（非错误的）浏览器上运行。）

带有延迟，按钮列表的闪烁mouseenter mouseleave

1 个答案: