单击复选框时，页面跳转到顶部

Question

我在单击复选框时调用handleNotableTypeSelect方法，一切正常但页面跳转到顶部。

this.$hideInactiveCheckbox.click(
    this.handleNotableTypeSelect.createDelegate(this));
    handleNotableTypeSelect: function(e) {
        //e.preventDefault();
        if (this.$hideInactiveCheckbox.attr('checked')) {
            this.isActive = "^active$";     
            this.$connTable.fnFilter(this.isActive, 1,true);     
        }
        else {
            this.$connTable.fnFilter('', 1);
        } 
        //return false;
    }

Answer 1

这可能与以下问题有关：

input checkbox in div jumps to top of page on firefox

我实际上已经在各种框架中看到了这方面的错误，并且在大多数情况下，人们发布了框架特定的答案。如果您隐藏了复选框，请尝试使用display：none，它似乎适用于上面的帖子。我还在尝试寻找一个修复程序（因为我没有隐藏我的复选框，我正在弄清楚为什么模式中的复选框会导致屏幕在点击时跳转到模态的顶部）。

Answer 2

我的情况是该复选框处于隐藏状态（由于CSS设计）。原始输入复选框的位置设置为“绝对”，因此，当用户单击复选框时，页面“跳至”真实的复选框位置。

编辑：

在某些情况下，会有样式为“假”的复选框。真正的复选框元素以某种不好的做法被隐藏了。 我的情况是，真正的复选框元素具有绝对的位置和隐藏的位置，并且导致页面跳至窗口顶部。

可能的解决方案：

检查checkbox元素是否具有以下CSS规则 position: absolute;
如果是，则删除此规则可以解决此问题。

Answer 3

一些框架和 css 技巧使用 position: absolute 隐藏复选框。 这是正确的，因为我们只需要在屏幕上隐藏复选框，而屏幕阅读器必须有权访问它才能正确宣布它。但是 display:none 也对他们隐藏了它，有可访问性问题的用户无法点击它。 最合适的解决方案是将 position:relative 添加到复选框容器并根据需要使用 top: 调整复选框位置。