为什么 JavaScript 事件刷新页面

Why does JavaScript event refreshes page

本文关键字：刷新 事件 JavaScript 为什么      更新时间：2023-09-26

所以我有这段代码来使用 RegExp 进行搜索，它通过一个字符串数组并搜索用户输入：

Clinica.prototype.pesquisarDoente = function ()
{
    var exp = document.getElementById("pesquisaInput").value;
    var lista = document.getElementById("listaDoentes");
    if (exp)
    {
        while (lista.firstChild)
        lista.removeChild(lista.firstChild);
        var patt = new RegExp(exp);
        var lenght = this.doentes.length
        for ( i = 0; i < lenght; i++)
        {
            if (patt.test(this.doentes[i].nome))
            {
                var option = document.createElement("option");
                option.appendChild(document.createTextNode(this.doentes[i].toString()));
                lista.appendChild(option);
            }
        }
    }
}

然后我在一个事件中调用它：

var buttonPesquisa = document.createElement("input");
    buttonPesquisa.type = "submit";
    buttonPesquisa.value = "Pesquisar";
    buttonPesquisa.addEventListener('click', function () { cl.pesquisarDoente(this); });

然后我附加到我的页面。 问题是，当我单击该按钮时，它会清除选择列表，然后刷新页面。 这是为什么呢？

这是因为您正在创建一个提交按钮，一旦单击该按钮将触发一个提交事件，该事件似乎正在刷新页面...

您需要preventDefault()事件。

试试这个：

var buttonPesquisa = document.createElement("input");
    buttonPesquisa.type = "submit";
    buttonPesquisa.value = "Pesquisar";
    buttonPesquisa.addEventListener('click', function (e) { e.preventDefault(); cl.pesquisarDoente(this); });

提交按钮 提交表单。

提交表单会将表单数据发送到操作指定的 URI（如果没有操作，则发送到当前 URI），并将响应加载为新页面。

将按钮的类型更改为"按钮"：

var buttonPesquisa = document.createElement("input");
    buttonPesquisa.type = "button";
    buttonPesquisa.value = "Pesquisar";
    buttonPesquisa.addEventListener('click', function () { cl.pesquisarDoente(this); });

只需使用 

var buttonPesquisa = document.createElement("button");
buttonPesquisa.type = "button";
// rest of code

它不应该刷新您的页面。

相关文章：