使用stopImmediatePropagation后如何防止关键事件从handsontable传播？

Question

我的最终目标是当用户按右时自动将一列添加到handsontable，光标位于最右边的列中，如果用户向左移动时最右边的列为空，则删除最右边的列；行也一样。

下面是我几乎可以工作的代码，但有一个问题：如果我不使用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);

Answer 1

所以，这是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();
        }

不过，我还做了一些更改，所以如果有人需要 sn-p，就这样吧：

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();
            }
        }
    }
});