jQWidegtsのスプリッターを使用していますが、スプリッターを有効にすると奇妙な動作が発生します。無効にすると、奇妙な動作が停止します。私は問題の JSFiddle を作成しました- それは私が得ることができるほど簡単です。
問題を再現するには:
- JSFiddle をロードし、何かを行う前に、[送信] ボタンまたは [文字列] タブにマウスオーバーします。
- 送信ボタンが赤
colorに変わり、「文字列」タブもスタイルが変わります。 - 次に、[送信] ボタンや [文字列] タブの下など、空白部分をクリックします。
- ボタンまたはタブにマウスオーバーすると、どちらのスタイルも変更されなくなりました。
- 空白をもう一度クリックしてからマウスオーバーすると、スタイルが変わります。
これはトグルのような動作ではありません。これは、3 回クリックしてもマウスオーバー時のスタイリングが妨げられないためです。発生するのは初回のみです。
スプリッターを設定する行をコメントアウトすると、次のようになります。
$('#splitter').jqxSplitter(splitterConf);
その後、問題はなくなります。divの外側にある HTML 要素では、splitterこの問題は発生しません。
私の唯一の考えは、イベントがスプリッタによって消費され、伝播されていないということです。ただし、splitterdiv にはイベントが関連付けられていません。少なくとも、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()
しかし、なぜこれが発生しているのか、なぜ問題が発生しているのかはわかりません。誰かが問題の内容を知っているのが理想的ですが、それができない場合は、デバッグ方法や解決策への移行方法に関するヒントが役立ちます。