Question

我正在尝试捕获提交按钮的点击事件，并在页面不存在的情况下将页面滚动到顶部。

由于某种原因，该事件不会第一次触发，即如果滚动大于 0，则不会发生滑动到页面顶部。它只会第二次激活。

var buttonSearch = function () {
    jQuery(document).ready(function () {
        $("#DashboardSearchButton").submit(function () {
            if (window.scrollY != 0) {
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }
        });
    });
};

<input id="DashboardSearchButton" type="submit" value="Search" onsubmit="buttonSearch();" />

有什么想法或建议吗？我错过了什么吗？谢谢。

Answer 1

试试这个：

jQuery(document).ready(function () {
    $("#DashboardSearchButton").submit(function () {
        if (window.scrollY != 0) {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
    });
});

<input id="DashboardSearchButton" type="submit" value="Search" />

您可以从元素的 onclick/onsubmit 属性调用一个函数或您创建一个 eventListener 来监视事件，而不是两者兼而有之。

jQuery 的事件侦听器是在“幕后”创建的，可以这么说：

$("#DashboardSearchButton").submit(function () { //stuff });

您永远不会看到 .addEventListener("submit", myFuncName) 字眼 - jQuery 会为您做到这一点。

第一次不起作用的原因是因为您创建了两个事件侦听器。第一个由 onsubmit= 输入上的 #DashboardSearchButton 属性触发，仅创建了第二个事件侦听器（jQuery .submit() 处理程序。一旦创建了第二个事件侦听器，it 现在也监听提交，第二次一切正常。但是，每次点击提交按钮时，都会创建另一个 jQuery 事件处理程序。

提交按钮第一次不触发事件

1 个答案: