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

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

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

编辑：

在某些情况下，存在样式为“假”的复选框。真正的复选框元素以某种不良做法隐藏。 我的情况是，真正的复选框元素具有绝对定位并隐藏，这导致页面跳转到窗口顶部。

可能的解决方案：

检查复选框元素是否具有以下 CSS 规则

position: absolute;

如果是，删除此规则可以解决此问题。

Answer 2

这可能与以下问题有关：

div 中的输入复选框在 firefox 上跳转到页面顶部

实际上，我在各种框架中都看到了与此相关的错误，并且在大多数情况下，人们发布了特定于框架的答案。如果您隐藏该复选框，请尝试使用 display: none ，它似乎适用于上面的帖子。我仍在尝试寻找修复程序（因为我没有隐藏我的复选框，所以我正在尝试找出为什么模式中的复选框会导致屏幕在单击时跳转到模式的顶部）。

Answer 3

一些框架和 CSS 技巧使用

position: absolute

隐藏复选框。 这是正确的，因为我们只需要在屏幕上隐藏复选框，而屏幕阅读器必须有权访问它才能正确宣布它。但

display:none

也对他们隐藏了它，有辅助功能问题的用户无法单击它。 最合适的解决方案是将

position:relative

添加到复选框容器，并根据需要使用

top:

调整复选框位置。

Answer 4

如果复选框已绝对定位以隐藏它并且交互发生在标签上（这在默认 UI 之外设置复选框样式时很常见），则页面将滚动到复选框输入所在的位置，尽管标签上发生了单击事件。例如，如果您添加了

top:-9999px;

，页面将直接跳转到现在所在的位置。 相反，您想要的是将其从渲染的布局中删除，而不将其从标签上移开。为此，请将容器 div 添加到标签和输入，并向其添加

position:relative;

。然后将以下代码添加到输入本身：

position:absolute;
top:0; left:0;
visibility: hidden;
opacity: 0;

Answer 5

如果您的复选框有

position: absolute

，在大多数情况下只需用 div 包裹它（输入和标签元素）就足够了。

Answer 6

也许您有两个具有相同 ID 的元素。单击复选框标签后，您会跳转到第一个位置。

Answer 7

不幸的是，所提供的回复均不适合我的情况（基于标签元素内隐藏的本机输入元素的自定义复选框，导致 AJAX 请求和页面更新）。因此，我想出了在设置复选框/发送请求之前检测并保存滚动位置，然后在选中复选框/满足请求后向下滚动到该位置。比如：

const scrolled = window.scrollY;
...
// you also might need a short pause with setTimeout or in case of Vue
await this.$nextTick();

// and then
window.scrollTo({
  top: scrolled,
});