0

我制作了一个<p>带有按钮的列表（）。当我将鼠标移到它们上面时，会延迟 1.2 秒，然后我的文本框会被标记为黄色以显示我可以在哪里书写。当我将鼠标移开时，它们变为正常（白色）。

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

这是一个小提琴：http: //jsfiddle.net/Pota/Fj6E6/

这是我的 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;
                }
            }
4

1 回答 1

0

您的 jsFiddle 肯定让我感到困惑（我不确定您要达到什么目的 - 您有可能使事情过于复杂）。我希望我能满足你的要求...

无论如何，我相信您的逻辑是正确的，但是在实施中存在一些缺陷。因此，这是您的 jsFiddle 的修改（和部分更正）版本，它可以（我相信）您想要实现的目标。

您对'$this.next(mouseOutRespRoleId()).is(":visible")'的使用肯定是最令人困惑的，因此我将其完全删除。（如果它实现了其他一些不明显的目的，您必须提供更详细的描述。）

主要问题是它$this.next(mouseOutRespRoleId()).is(":visible")永远不会评估为真，因此永远不会清除调用mouseInRespRoleId().

编辑：
我更新了我的jsFiddle 插图，以便它处理 IE9 的奇怪行为（又名错误（？））。它现在应该可以正常工作而不会闪烁。
问题的简短解释：
显然，在 IE9 中，鼠标事件的生成存在一些“时间问题”，因此当快速多次进入 (mouseOver) 和离开 (mouseOut) 组件时，有时鼠标事件的顺序会变得混乱。例如：
以下事件序列（即实际事件）：

mouseOver -> mouseOut -> mouseOver

可能会产生以下（显然是错误的）javascript-event 序列（即在 IE9 中由 JS-engine 触发的事件）：

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

因此，我在“mouseentered”处理程序函数中添加了一个额外clearTimeout($this.data("delay"))的功能，以清除“mouseInRespRoleId”的任何未决计划执行。它不能在 IE9 上完美运行（可能还有以前的 IE 版本 - 未经测试），但它已经尽善尽美（afaik）。

（注意：它仍然可以在其他（非错误）浏览器上按预期工作。）

于 2013-05-07T10:00:10.230 回答