私は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()
しかし、なぜこの問題が発生しているのか、それが問題を引き起こす原因はわかりません。理想的に誰かが問題の内容を知っていますが、失敗すると、デバッグ/解決策のヒントが得られるはずです。