在onchange請求期間DOM操作（blockUI或alert（））問題 - 防止其他事件觸發

編輯：我錯誤地認爲這是由blockUI（）引起的。我使用Firebug的console.log來記錄消息，但對於這裏的示例，我更改爲提醒，以便您不需要Firebug進行復制。一旦我再次測試，我可以刪除blockUI，並且onclick沒有開火。這個問題似乎是在DOM發生變化或反饋的時候，因爲它會阻止onclick發射。在onchange請求期間DOM操作（blockUI或alert（））問題 - 防止其他事件觸發

我與 ~~jQuery blockUI插件~~ 有問題，併發射了兩個事件（我認爲，除非我失去它）無關。

基本上我有綁定到他們的onchange事件的文本框。該事件負責阻止用戶界面，執行ajax調用，併成功解除用戶界面。 ajax將文本保存在內存中。另一個控件是一個帶有onclick事件的按鈕，它也阻止UI，觸發ajax請求，將內存中的內容保存到數據庫，併成功解除UI的阻塞。

這兩個工作單獨罰款。當我點擊按鈕觸發onchange時，就會出現問題。然後只有onchange被觸發，onclick被忽略。

我可以更改複選框中的文本，單擊鏈接，如果存在jQuery.blockUI（）存在（或警報），則會單獨激活onchange並從不調用保存。如果我刪除blockUI（或警報），則調用這兩個函數。

下面是一個可以看到問題的完整示例。請注意，當我試圖模擬ajax延遲時，setTimeout存在，但問題在沒有它的情況下發生。

要在文本框中複製類型並點擊保存。兩個事件都應該是觸發的，但只有onchange纔會被觸發。

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"></script> 
    <script> 
     function doSomething(){ 
      //$.blockUI(); 
      alert("doing something"); 
      //setTimeout(function(){ 
       //$.unblockUI(); 
      //},500); 
     } 

     function save(){ 
      //$.blockUI(); 
      console.log("saving"); 
      //setTimeout(function(){ 
      //$.unblockUI(); 
      //}, 1000); 
     } 

    </script> 
</head> 

<body> 
    <input id="textbox" type="text" onchange="doSomething();"> 
    <a id="link" href="#"onclick="save()">save</a> 
</body> 
</html>

來源

2010-05-06 jfrobishow

看來問題不在於blockUI調用本身，而是在doSomething（）中使用DOM進行播放。我原來的本地示例使用Firebug的console.log（）而不是警報。我已經修改了我的示例以完全脫掉jQuery.blockUI並僅使用警報......問題仍在發生。 – jfrobishow 2010-05-06 18:43:46

在單個頁面的環境中，在任何給定時間只會有一個事件循環。如果你的ajax調用是同步的，那麼當一個事件正在被處理時，那麼所有的事情都將繼續。如果瀏覽器要觸發另一個事件循環，那麼它不會是單線程的。但事實確實如此，事實並非如此。

來源

2010-05-06 19:18:34 Pointy

我從示例中刪除了ajax調用，並使用了一個警報來代替產生相同的結果（第二個事件未觸發）。您的解釋是有道理的，因爲警報正在等待用戶輸入，因此阻塞線程...但是不應該在下一個事件排隊？ – jfrobishow 2010-05-06 19:46:53

那麼這是由瀏覽器... – Pointy 2010-05-07 02:49:17

然後不會onfocus導致同樣的事情？，因爲你可以看到在我的其他職位onfocus被解僱。 – jfrobishow 2010-05-18 16:00:26

以下「固定它」使用onfocus作爲鏈接和事件被觸發。用onclick它不是。

這項工作：

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"></script> 
    <script> 
     function doSomething(){ 
      alert("blocking UI"); 
      console.log("do something"); 
      //alert("doing something"); 
      //setTimeout(function(){ 
       //$.unblockUI(); 
      //},500); 
     } 

     function save(){ 
      //$.blockUI(); 
      console.log("saving"); 
      //setTimeout(function(){ 
      //$.unblockUI(); 
      //}, 1000); 
     } 

     function cachebtn() 
     { 
      console.log("cache bouton"); 
     } 
    </script> 
</head> 

<body> 
    <input id="textbox1" type="text" onchange="doSomething();"> 
    <input id="textbox2" type="text" onchange="doSomething();"> 
    <a id="link" href="#" onfocus="save()">save</a> 
</body> 
</html>

這不，唯一不同的是，當平變化之前它未燒製的onclick。

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"></script> 
    <script> 
     function doSomething(){ 
      alert("blocking UI"); 
      console.log("do something"); 
      //alert("doing something"); 
      //setTimeout(function(){ 
       //$.unblockUI(); 
      //},500); 
     } 

     function save(){ 
      //$.blockUI(); 
      console.log("saving"); 
      //setTimeout(function(){ 
      //$.unblockUI(); 
      //}, 1000); 
     } 

     function cachebtn() 
     { 
      console.log("cache bouton"); 
     } 
    </script> 
</head> 

<body> 
    <input id="textbox1" type="text" onchange="doSomething();"> 
    <input id="textbox2" type="text" onchange="doSomething();"> 
    <a id="link" href="#" onclick="save()">save</a> 
</body> 
</html>

來源

2010-05-06 19:51:33 jfrobishow

在onchange請求期間DOM操作（blockUI或alert（））問題 - 防止其他事件觸發

回答

相關問題