不明白工作的js代碼

請看到這一點： http://jsfiddle.net/Muj3d/8/不明白工作的js代碼

假設鼠標光標在div_1，現在拖動鼠標從div_1到div_2，正如我們看到的，第一次發生作用mouseout和mouseover後。好吧，現在從js代碼中刪除alerts()，並重復鼠標再次拖動，因爲我們看到，div_2沒有刪除，問題：爲什麼？

來源

2012-10-23 RIKI

因爲在div2的'mouseover'事件中，您再次顯示爲'block'。 –

您會看到不同之處，因爲警報也會導致'mouseout'事件。如果你想用正確的事件進行測試，你最好有一個「狀態」類型的元素，可以顯示你想要看到 – freefaller

@Sayem Ahmed是的，但在顯示爲塊之前，必須使用'mouseout'必須刪除'div_2'？ – RIKI

你的兩個函數是隱藏然後顯示div。如果沒有執行中的暫停，警報提供了這種情況發生得非常快，以至於您沒有注意到它。

拆卸：

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

你會明白我的意思。

來源

2012-10-23 11:39:44

因爲mouseover事件div2，您再次顯示它爲block。 alert似乎引入了延遲。嘗試將div_1中的鼠標移動到文檔中的某個其他位置，而不是將它移動到div_2，看到div_2消失，正如所料。

來源

2012-10-23 11:40:44

你應該使用這樣的：

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

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


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

用CSS顯示屬性中使用引號。

來源

2012-10-23 11:41:25 Jai

第二事件發送方只需更改從#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"}); 
       }); 
      });

來源

2012-10-23 11:41:32 shybovycha

因爲兩個事件是射擊「幾乎」在同一時間。我說幾乎意味着mouseover在mouseout之後觸發，讓div顯示（display: block）。

如果記錄的事件，而不是提醒你會看到他們的順序都燒：http://jsfiddle.net/Muj3d/14/

希望解釋它。

來源

2012-10-23 11:42:50 Tallmaris

不明白工作的js代碼

回答

相關問題