悬停在按钮上时如何禁用默认的 URl 显示答案

【问题标题】：how to disable defalut URl showing when overing on button悬停在按钮上时如何禁用默认的 URl 显示
【发布时间】：2014-01-23 08:36:22
【问题描述】：

请参考下图

在移交时，它会在 IE 浏览器的窗口底部显示一些 URl。但没有为此按钮提供 url。

这是按钮代码

<button id="btnCancel"  >Cancel</button>

如何删除无效的网址？为什么会显示在 IE 浏览器中？

谢谢，

湿婆

【问题讨论】：

按钮本身不显示任何 URL，您可以通过仅使用 <button> HTML 创建一个空页面来验证它。 IE中不会显示URL。然后您必须找出导致显示 URL 的原因。或者发布一些最小的代码，它的行为是这样的。

标签： javascript html css internet-explorer

【解决方案1】：

这不是您可以向客户端浏览器提出的要求，因此没有官方方法。幸运的是，解决方法很少。

让我们先看看它通常是如何处理链接的：

<a id="myLink" href="#" data-href="http://stackoverflow.com">Click me</a>

<script type="text/javascript">
    $(document).ready(function () {
        $("#myLink").click(function (e) {
            e.preventDefault();

            window.location.href = $("#btnCancel").data("href");
            return false;
         });
    });
</script>

当 submit 按钮位于 <form> 中时，Internet Explorer 也会显示相同的链接（当然，目标 URL 是 -resolved - target 和 action 属性的组合）。此外不要忘记<button> 中type 属性的默认值是submit。

解决方案

第一个可能的解决方案是不要使用<button> 而使用<input type="button"> 来解决问题：IE 不会显示目标 URL，您可以使用 JavaScript 手动提交表单。

如果您需要<button> 提供的高级格式，那么您可以应用相同的技术：使用button 类型的按钮而不是submit（默认），IE 不会显示任何工具提示。

HTML（如果需要保留<button>元素）：

<button id="btnCancel" type="button">Cancel</button>

或者（如果内容只是一个纯字符串）：

<input id="btnCancel" type="button" value="Cancel"></input>

或者（如果您使用的是 Bootstrap 并且想要使用链接）：

<a id="btnCancel" class="btn" href="#">Cancel</a>

JavaScript：

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnCancel").click(function (e) {
            myForm.submit(); 
        });
    });
</script>

【讨论】：

【解决方案2】：

始终为“按钮”元素指定类型属性。不同的浏览器对“按钮”元素使用不同的默认类型。如果您未在按钮元素中指定“类型”，浏览器将假定它为“提交”类型并使用按钮元素的封闭“表单”元素动作。请参阅以下链接以供参考- https://www.w3schools.com/tags/tag_button.asp

【讨论】：