Chrome 浏览器中的意外网页刷新答案

【问题标题】：Unexpected web page refresh in Chrome browserChrome 浏览器中的意外网页刷新
【发布时间】：2018-05-28 16:45:06
【问题描述】：

我已经面对这种奇怪的行为一段时间了，找不到任何解决方法。

有一个带有某些方法的按钮在点击时调用。在 Firefox 中运行良好。在 Chrome 中，它只是刷新整个页面。

$("#modoComparativa").click(function(){
   if($(this).hasClass("active")){
                $('#histFromDate').attr("placeholder","Date 1");
                $('#histToDate').attr("disabled","disabled").attr("placeholder","Date 2");
                startDatepickerComp();
            }
            else{
                $('#histFromDate').attr("placeholder","Initial date");
                $('#histToDate').attr("disabled","disabled").attr("placeholder","Final date");
                startDatepicker();
            }
            $('#clearDates').attr("disabled","disabled");
            // This function calls another function causing the odd behavior in Chrome
            requestGraph(idDetail, idArea, "", "");
        });

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

如果我注释掉除了选择器和对 click 方法的调用之外的所有内容，则行为是相同的。它刷新了一切。

我不知道如何调试它，因为每次按下按钮时，整个页面都会刷新，并且浏览器调试器中不会保留任何日志/错误。

任何想法将不胜感激。

编辑 - 根据要求添加选择器：

<div class="form-group"><button class="tooltip3 btn btn-default glyphicon glyphicon-random" id="modoComparativa" data-toggle="tooltip" title="ACTIVAR COMPARATIVAS" data-placement="bottom"></button>
                            </div>

【问题讨论】：

您可以为#modoComparativa 元素添加标记吗？另外，在chrome中，您可以点击控制台上方的“保留日志”复选框，页面刷新时不会清除。
作为编辑添加。将尝试保留日志功能，感谢您的宝贵时间。

标签： javascript jquery html google-chrome

【解决方案1】：

在您的点击回调中添加一个 return false 以防止由于您的 html 语法而导致的操作（例如表单提交或单击锚标记）。

$("#modoComparativa").click(function(event){
    event.preventDefault();

    // your existing code
}

编辑：由于您添加了 html...

如果您的按钮在表单中，您还可以添加 type="button" 属性以防止它提交您的表单。

<button type="button" class="tooltip3 btn btn-default glyphicon glyphicon-random" id="modoComparativa" data-toggle="tooltip" title="ACTIVAR COMPARATIVAS" data-placement="bottom"></button>

感谢lonesomeday推荐http://api.jquery.com/event.preventDefault/

【讨论】：

天才！它现在按预期工作。非常感谢。
仍然需要等待 5 分钟才能接受这个超快速准确的答案。
return false 不是执行此操作的理想方式。正确的方式是event.preventDefault()，最好在回调函数的顶部。
很好的建议，你能解释一下原因吗？
@lenord return false 的问题是可能有代码在返回语句之前被执行。如果在您返回之前在您的代码中发生异常（或者不熟悉“false”含义的人添加了return;），页面将刷新。

【解决方案2】：

我添加了一个答案，该答案可能对在这里绊倒但有其他原因导致此行为的人有用。这种意外的随机重新加载可能是由多种原因造成的：

如其他答案中所述，一个链接会传播点击，然后在页面本身上执行GET
一个图片标签<img>，其中src为空或无效，浏览器将尝试使用GET加载图片，但实际上会刷新页面（空=相对于页面=页面） .即使是隐藏的图像也会被加载，因此很难找到，请使用浏览器控制台！
在某些情况下（会话过期、令牌过期...）以编程方式刷新页面的一些 javascript 逻辑
浏览器“功能”，例如：https://support.mozilla.org/en-US/questions/1204335，或https://superuser.com/questions/1048029/disable-auto-refresh-tabs-in-chrome-desktop

在任何情况下，使用浏览器控制台并寻找可疑的GET 调用页面本身或重定向。

【讨论】：