javascript - 使用stopImmediatePropagation后，如何防止键事件从动手操作传播？

我的最终目标是在用户按向右时自动将一列添加到动手操作中，光标位于最右边的列中，如果用户向左移动则将最右边的列为空，则删除最右边的列。行相同。

下面是我的代码几乎可以正常工作，但是有一个问题：如果我不使用Handsontable.Dom.stopImmediatePropagation(event)，则按向上键会删除底部的列，并将选择向上移一列（这是预期的行为）；但是如果使用.stopImmediatePropagation，则按向上键会将我带到右边的单元格（并删除底部的行），但也会导致页面滚动。 .stopImmediatePropagation是否也应该抑制传播到页面？这是错误吗？我应该使用其他方法吗？

这是fiddle。到目前为止，我的代码看起来像

Handsontable.hooks.add('beforeKeyDown',function(event)
{
    var $right = 39, $down = 40, $left = 37, $up = 38,
        selected = this.getSelected(),
        isEditMode = this.getActiveEditor().isOpened();
    if(isEditMode) return;

    // calc dimensions
    var endColNum = selected ? (selected[3]+1) : null,
        colsNum   = this.countCols(),
        isLastCol = endColNum == colsNum,
        endRowNum = selected ? (selected[2]+1) : null,
        rowsNum   = this.countRows(),
        isLastRow = endRowNum == rowsNum,
        i, noData, data = this.getData();

    // handle arrow keys
    if(isLastCol) {
        if(event.which == $right)
            this.alter('insert_col');
        if(event.which == $left) {
            noData = true;
            for(i = 0; i < rowsNum; i++)
                if(data[i][endColNum-1]) // check cells content
                    noData = false;
            if(noData) {
                this.alter('remove_col');
                Handsontable.Dom.stopImmediatePropagation(event);
            }
        }
    }
    if(isLastRow) {
        if(event.which == $down)
            this.alter('insert_row');
        if(event.which == $up) {
            noData = true;
            for(i = 0; i < colsNum; i++)
                if(data[endRowNum-1][i]) // check cells content
                    noData = false;
            if(noData) {
                this.alter('remove_row');
                Handsontable.Dom.stopImmediatePropagation(event);
            }
        }
    }
},myHandsontable);

最佳答案

因此，这是建议的解决方案at github：在Handsontable.Dom.stopImmediatePropagation(event);之后添加event.preventDefault()（我已经尝试过），但是不要添加任何.preventPropagation / .cancelBubble（我为什么还没有尝试过）。 noData部分现在看起来像

        if(noData) {
            this.alter('remove_col');
            Handsontable.Dom.stopImmediatePropagation(event);
            // don't scroll the page
            if(event.preventDefault)
                event.preventDefault();
        }

不过，我进行了一些更改，因此，如果有人需要摘录，请按以下步骤进行：

Handsontable.hooks.add('beforeKeyDown',function(event)
{
    var $right = 39, $down = 40, $left = 37, $up = 38,
        selected = this.getSelected(),
        isEditMode = this.getActiveEditor().isOpened();
    if(isEditMode) return;

    // calc dimensions
    var startRowNum = selected ? (selected[0]+1) : null,
        startColNum = selected ? (selected[1]+1) : null,
        endRowNum   = selected ? (selected[2]+1) : null,
        endColNum   = selected ? (selected[3]+1) : null,
    // endRowNum is not necessarily >= startRowNum, it is where selection /has ended/
        rowsNum = this.countRows(),
        colsNum = this.countCols(),
        isFirstRow  = endRowNum == 0,
        isLastRow   = endRowNum == rowsNum,
        isFirstCol  = endColNum == 0,
        isLastCol   = endColNum == colsNum,
        i, noData, data = this.getData();

    // handle arrow keys
    if(isLastRow) {
        if(event.which == $down)
            this.alter('insert_row');
        if(event.which == $up && !isFirstRow) {
            noData = true;
            for(i = 0; i < colsNum; i++)
                if(data[endRowNum-1][i])
                    noData = false;
            if(noData) {
                this.alter('remove_row');
                Handsontable.Dom.stopImmediatePropagation(event);
                // don't scroll the page
                if(event.preventDefault)
                    event.preventDefault();
            }
        }
    }
    if(isLastCol) {
        if(event.which == $right)
            this.alter('insert_col');
        if(event.which == $left && !isFirstCol) {
            noData = true;
            for(i = 0; i < rowsNum; i++)
                if(data[i][endColNum-1])
                    noData = false;
            if(noData) {
                this.alter('remove_col');
                Handsontable.Dom.stopImmediatePropagation(event);
                // don't scroll the page
                if(event.preventDefault)
                    event.preventDefault();
            }
        }
    }
});

关于javascript - 使用stopImmediatePropagation后，如何防止键事件从动手操作传播？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43721402/