Question

嵌套div与点击事件。

我有几个嵌套的div绑定到一个常见的viewModel对象，我使用knockoutjs来绑定它。父级和子级div具有多个绑定，包括父级上的单击事件。父div单击事件用于选择显示默认情况下隐藏的视觉提示的元素。

绑定代码如下：

<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应该将光标放在所需的位置以输入文本。

删除父点击事件

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

有人知道为什么焦点会在点击事件中丢失吗？

也许黑客可以运作 我还没有尝试过的一个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 设置了插入位置焦点并在视图中丢失。

KnockoutJs光标位置丢失了父点击事件

0 个答案: