0

我正在使用来自 jQWidegts 的拆分器，并且在启用拆分器时遇到了一些奇怪的行为。当它被禁用时，奇怪的行为就会停止。我已经创建了一个JSFiddle 的问题- 它就像我能得到的一样简单。

要重现问题：

  1. 加载 JSFiddle 并在执行任何操作之前，将鼠标悬停在提交按钮或“字符串”选项卡上。
  2. 提交按钮应变为红色color，并且“字符串”选项卡也会更改样式。
  3. 接下来，单击一些空白区域，例如，在“提交”按钮或“字符串”选项卡下方。
  4. 现在将鼠标悬停在按钮或选项卡上 - 样式不再更改。
  5. 如果您再次单击某个空白区域，然后将鼠标悬停，则样式会发生变化。

这不是类似切换的行为，因为第三次单击不会阻止鼠标悬停时的样式。它只发生在第一次。

如果我注释掉设置拆分器的行：

$('#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()

但我不知道为什么会发生这种情况或为什么会导致问题。理想情况下，有人知道问题出在哪里，但如果做不到这一点，一些关于如何调试/转向解决方案的提示会很好。

4

1 回答 1

0

来自jQWidgets团队

这是一个已知问题，将在下一个版本中解决。

来源：http ://www.jqwidgets.com/community/topic/splitter-widget-causing-loss-focus-or-event-consumption

于 2012-04-29T12:04:36.553 回答