javascript - 不理解工作的js代码

Question

请看这个：http: //jsfiddle.net/Muj3d/8/

假设鼠标光标打开div_1，现在将鼠标从 拖动div_1到div_2，如我们所见，第一次发生的动作mouseout和之后mouseover。好的，现在alerts()从 js 代码中删除并再次重复鼠标拖动，如我们所见，div_2没有删除，问题：为什么？

Answer 1

因为在mouseoverdiv2 事件中，您再次将其显示为block. alert似乎引入了延迟。尝试将鼠标从div_1文档中的其他位置移动，而不是移动到div_2，看到它div_2按预期消失。

Answer 2

因为这两个事件“几乎”同时触发。我说的几乎意思是mouseover之后的火灾mouseout，让 div 显示 ( display: block)。

如果您记录事件而不是警报，您将看到它们都按此顺序触发：http: //jsfiddle.net/Muj3d/14/

希望能解释一下。

Answer 3

你应该使用这个：

$("#div_1").on("mouseout", function () {

      $("#div_2").css({
        'display': "none"
       });
     });


   $("#div_1").on("mouseover", function () {
      $("#div_2").css({
         'display': "block"
        });
   });

使用带有 CSS 显示属性的引号。

Answer 4

只需将第二个事件发送者从更改#div_2为#div_1：

$(document).ready(function () {

                $("#div_1").on("mouseout", function () {
                      //alert("action mouseout");
                    $("#div_2").css({display: "none"});
                 });


                  $("#div_1").on("mouseover", function () {
                       //alert("action mouseover");
                      $("#div_2").css({display: "block"});
                 });
            });​

Answer 5

您的两个功能正在隐藏然后显示 div。如果没有警报提供的执行暂停，这种情况会发生得如此之快，以至于您不会注意到它。

删除以下内容：

   $("#div_2").css({
       display: "block"
   });

你会明白我的意思。