1

带有点击事件的嵌套 div。

我有几个嵌套的 div，它们绑定到我使用 knockoutjs 绑定的公共 viewModel 对象。父 div 和子 div 有几个绑定，包括父上的单击事件。父 div click 事件是一种选择元素的方式，该元素显示一些默认情况下隐藏的视觉提示。

绑定代码如下：

<div data-bind="foreach : cardElements">

        <div data-bind="if: isArea(),
                attr: { id : ElementName },
                visible: isArea(),
                click : selectElement.bind($data),
                css : { layoutContainer : isEditMode() && isSelected(),
                        drag: isEditMode(),
                        selectedElement : isSelected() && isEditMode() },
                style : defaultStyle()">

 ... visuals elided for clarity(hidden by default viewable when parent is selected)

        @* Regular display fields. *@
        <div data-bind="if: isInput(),
                    attr : { contenteditable : isEditMode() },
                    visible : isInput(),
                    css: { layoutDiv :  isEditMode() },
                    style: { cursor : 'text' },
                    text: Value">
        </div>


 ... visuals elided for clarity

    </div>
</div>

点击事件后的焦点问题。

按住鼠标按钮会显示在 contenteditable div 中显示的光标（文本光标），它应该在单击后结束。释放后，焦点丢失并且光标消失（我也尝试使用输入元素并出现同样的问题）。这个想法是 mousedown/click 应该将光标放在输入文本的所需位置。

移除父点击事件

删除父级上的单击事件表明，如果没有它，contenteditable div 内的选择将按预期工作，并且单击后可以正常继续键入。但是，没有设置视觉提示，这当然是 click 事件处理程序的主要工作！

有谁知道为什么在点击事件期间失去焦点？

也许一个 hack 可以工作 一个我还没有尝试过的 hack 是根据 div 本身顶部的光标位置将焦点设置在 contenteditable div 上。这似乎不是一个微不足道的黑客，我也不知道它甚至可能。

对此主题的任何帮助将不胜感激。

也许越来越近

我可以通过做一些回归测试来缩小范围。如果我从父 div 中删除 css 样式，它似乎像往常一样单击。

删除了以下内容：

 css : { layoutContainer : isEditMode() && isSelected(),
                        drag: isEditMode(),
                        selectedElement : isSelected() && isEditMode() },

这仍然给我留下了不完整的行为。

可以吗？

似乎当添加父类时，焦点从 contenteditable div 中丢失了。

这是使用的更多代码。
... // 映射函数。

this.isSelected = ko.dependentObservable(function () {
    return (this === viewModel.selectedCardElement());
}, this);

this.selectElement = function (element, evt) {
     viewModel.selectedCardElement(element);
},

selectElement是被调用的函数，注意isSelected是一个dependentObservable，附加到模板中绑定的卡片元素。在我看来，一旦viewModel.selectedCardElement设置插入符号位置焦点并在视图中丢失。

4

0 回答 0