jQWidgets分離器部件導致丟失焦點或事件消耗

我正在使用splitter from jQWidegts，並且在啓用分離器時遇到一些奇怪的行爲。當它被禁用時，奇怪的行爲停止。我創建了一個JSFiddle of the problem - 這很簡單，因爲我可以得到它。jQWidgets分離器部件導致丟失焦點或事件消耗

重現問題：

裝入的jsfiddle和做任何事情之前，鼠標懸停提交按鈕或「串」選項卡。
提交按鈕應變爲紅色color，'字符串' 選項卡也會更改樣式。
接下來，單擊某個空白區域，例如，在提交按鈕或「字符串」選項卡下方。
現在將鼠標懸停在按鈕或標籤上 - 樣式不再爲更改。
如果再次點擊某個空格，然後鼠標懸停，樣式確實會改變。

這是而不是由於第三次點擊不會阻止鼠標懸停時的樣式。它只發生在第一次。

如果我註釋掉，設置了分流線路：

$('#splitter').jqxSplitter(splitterConf);

然後問題消失。 splitter div以外的任何HTML元素都不會遇到此問題。

我唯一的想法是一個事件正在被分離器消耗而不被傳播。但是splitter div沒有附加任何事件，至少它們不會在Chrome的JavaScript調試器中顯示。

我注意到，被點擊的空白時（觸發的問題），一個額外的div元件被附加到DOM：

<div style="width: 1680px; height: 275px; position: absolute; left: 0px; top: 0px; "></div>

此元素jqxsplitter.js在被追加下面的代碼：

initOverlay: function(c) { 
      var b = this; 
      if (b.overlay && c == undefined) { 
       b.overlay.remove() 
      } else { 
       b.overlay = a("<div></div>"); 
       b.overlay.width(b.host.width()); 
       b.overlay.height(b.host.height()); 
       b.overlay.css("position", "absolute"); 
       b.overlay.appendTo(a(document.body)); 
       var d = b.host.offset(); 
       b.overlay.css("left", d.left); 
       b.overlay.css("top", d.top) 
      }

從調用堆棧我看到它是從_stopDrag調用，所以它似乎是防止拖的一些方法：

_stopDrag: function(b) { 
     if (b._capturedElement) { 
      b._performAreaResize(); 
      b._capturedElement.remove() 
     } 
     b._capturedElement = null; 
     b._initOverlay()

但我不知道爲什麼會發生這種情況，或者它爲什麼會造成問題。理想情況下，有人知道問題出在哪裏，但如果不能解決這個問題，那麼關於如何調試/尋求解決方案的一些提示會很好。

來源

2012-04-29 Jack

jQWidgets分離器部件導致丟失焦點或事件消耗

回答

相關問題