如何在使用JavaScript进行Ajax调用时隐藏状态栏上显示的文本

Question

我一直在使用JavaScript中的Ajax。所有这些调用都是通过鼠标悬停在特定文本上来完成的。鼠标悬停会在状态栏底部显示被调用的JavaScript方法。我在一些网站上看到过完全掩盖它的情况。状态栏没有任何显示。

是否有可能在JavaScript中实现这一点，而不需要使用jQuery等框架？

下面是示例代码。

JavaScript 代码

<script language="javascript">
function doAjaxSearch()
{
    //1. Get the Input value
   var inputTxt = document.getElementById('inputTxt').value;

    //2. Get XMLHttpRequest (XHR)
   var xhttp = getXMLHttpRequest(); //separate method gives a 'xhttpr'

   var url = "getTasks";
   var params = "input="+inputTxt;
   var httpMethod = 'GET';

   xhttp.onreadystatechange = function()
   {
         if(xhttp.readyState==4 && xhttp.status==200)
         {
              console.log(xhttp.responseText);
              //prepare the response
              prepareOutput(xhttp.responseText);
         }
   };

   xhttp.open(httpMethod, url+"?"+params, true);
   xhttp.send();
}

</script>

HTML代码

 //rest of the code omitted for brevity..
 <input type=text name="inputTxt" id="inputTxt" size=20/>
 <a href="javascript:doAjaxSearch()">Search</a>

我一直能看到状态栏左下角显示文本“javascript:doAjaxSearch()”。

我想在纯JavaScript中隐藏浏览器状态栏中的此显示。任何帮助将不胜感激。

- itsraghz

---

你能展示一些代码吗？ - R.Costa

对不起，我没听懂你的意思。 - Amar Singh

如果你不想要jQuery的解决方案，为什么还要谈论它并在问题标签中加上它？另外，能否提供一个MCVE以便我们测试一下？ - A. Wolff

为了给您提供一个好的答案，看一下您的代码会很有帮助。 - Matt

@a-wolff，感谢您的提示。我刚刚删除了jQuery标签。我也会提供代码给其他人，以满足大家更好的理解。 - itsraghz

Answer 1

在 JavaScript 元素上添加事件监听器不会在将鼠标悬停在其上时在状态栏中显示消息:

function searchEventHandler(ev)
{
    // do something
}

el.addEventListener('click', searchEventHandler);

如果需要，可以使用以下方式进行删除：

el.removeEventListener('click', searchEventHandler);

编辑： 感谢RDeving的改进，删除事件处理程序。

更新： 您看到状态消息是因为您正在使用<a>标签来调用您的JavaScript函数。将其更改为<span>，并按上述说明添加事件处理程序以执行单击事件。

<script>
    function searchEventHandler(ev)
    {
        // do something
    }
    var search = document.getElementById('search');
    search.addEventListener('click', searchEventHandler);
</script>
<span id='search' style='cursor: pointer;'>Search</span>

- Matt

---

嗯，我之前不知道这种行为，现在我得测试一下，但是在我看来它的行为相当奇怪。 - A. Wolff

我对提问者的代码做出了一些假设，这是我不应该做的。毕竟，我们都知道关于假设的那句话！说到代码，提问者确实应该提供一些代码。 - Matt

关于这个问题，你应该避免在事件监听器中使用匿名函数，而应该像这样使用“el.addEventListener('click',FnThatFiresOnClick);”，这样，当你完成后，可以使用“el.removeEventListener('click',FnThatFiresOnClick);”。 - PRDeving

@itsraghz 我在 <span> 标签上添加了你要找的光标样式。如果你想让它显示已被点击，你可以在事件处理程序中更改搜索元素的文本颜色。 - Matt

@Matt-SL，谢谢你。我非常感激你的理解和支持。你应该得到一块饼干！ :) - itsraghz