Question

有什么方法可以防止div失去对特定操作的关注？

我有一个像Excel一样的网格。每个单元格-div元素都有blur事件onclick，onkeydown。

onKeyDown方法：

    onKeyDown(event) {
        const { keyCode } = event;
        let element;

        switch (keyCode) {
        case 13:
            // Key: ENTER
            if (this.isEditingAllowed) {
                element = document.querySelector(`.keyboard-navigable-${this.column}-${this.row}`);
                // I would love to stop propagation of that event here - do not call a blur !!
            }
            break;
        case 37:
            // Key: LEFT
            element = document.querySelector(`.keyboard-navigable-${this.column - 1}-${this.row}`);

            break;
        case 38:
            // Key: UP
            element = document.querySelector(`.keyboard-navigable-${this.column}-${this.row - 1}`);

            break;
        case 39:
        case 9:
            // Key: RIGHT || TAB
            element = document.querySelector(`.keyboard-navigable-${this.column + 1}-${this.row}`);
            if (!element) {
                // We get out of bounds - go to the next line
                element = document.querySelector(`.keyboard-navigable-0-${this.row + 1}`);
            }

            break;
        case 40:
            // Key: DOWN
            element = document.querySelector(`.keyboard-navigable-${this.column}-${this.row + 1}`);

            break;
        default: break;
        }

        if (element) {
            element.focus();
        }
    }

正如我们在enter键上看到的那样，我很想停止传播此事件，因为不允许调用模糊-为什么？当我们进入编辑模式时，我确实有条件地渲染其他元素。我不想失去背后要素的背景。 .preventDefault()或.stopPropagation()不起作用。而且我需要监听blur事件，因为相同的元素也有onclick事件，并且我不想在{{1}中存在的任何地方selectedDOMElement到.blur()中存储它}方法（如果我们对此具有本地支持）。

当我们按下onclick键时，还有其他方法可以停止模糊/保持“父”元素的焦点吗？

Answer 1

如果您不想将焦点放到输入字段，则不要这样做。

case 13:
    // Key: ENTER
    if (this.isEditingAllowed) {
        // simply remove this so that later you don't move the new input field:
        // element = document.querySelector(`.keyboard-navigable-${this.column}-${this.row}`);
    }
    break;
...
if (element) {
    element.focus(); // this is YOU telling the previous element to loose focus ;-)
}

防止div失去焦点

1 个答案: