Question

我的最终目标是当用户按下右键时自动将列添加到handontable，光标位于最右边的列中，如果用户向左移动，则删除最右边的列（如果它是空的）;对于行也一样。

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

我已经做了一些更改，所以如果有人需要一个片段，那么它就是：

$this->loop->addPeriodicTimer($timeout, function($timer) {});

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

1 个答案: