javascript - 由 Tampermonkey 创建的链接在 Chrome 中有效，但在 Firefox 中无效？

Question

这个问题已经有答案了:

Link inside a button not working in Firefox (7 个回答)

已关闭 5 年前。

我编写了一个简单的脚本，将 float 按钮添加到一系列页面，该按钮根据某些功能重定向到 URL。这是通过 Tampermonkey 添加的。

以下代码在 Chrome 和 Firefox 中都会生成一个按钮，但只能在 Chrome 中单击:

var html = '<div id="gmSomeID"><button id="tapButton" type="submit"><a href="'+output_url+'" style="color:white">A</a></button></div>';
    $("body").append(html);

有什么想法可能会导致这个问题吗？

Answer 1

该代码在语义上不明确并且 invalid HTML ;不要那样编码!

考虑:

var output_url = '#';
var newHtml = `
    <div>
        <button id="badButton" type="submit">
            <a id="badLink" href="${output_url}">Click me</a>
        </button>
    </div>
`;
$("body").prepend (newHtml);
$("#badButton, #badLink").click ( zEvent => {
    console.log ("Clicked: ", zEvent.target.id);
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

你预计会发生什么？

• 按钮代码告诉浏览器在按钮上执行任何事件处理程序，然后提交包含的表单。如果存在这样的表单，提交它通常会将页面导航到远离其当前实例的位置——阻止链接执行。
• 链接代码将导航离开，阻止按钮执行。

如果您运行该代码并单击，那么当前您将得到:

• 在基于 Chromium 的浏览器上:点击:badLink。
• 在 Firefox 上:点击:badButton。

由于它是无效的 HTML，因此不保证浏览器以统一的方式处理它。

所以:

1. 不要将超链接放在按钮内。
2. 如果您希望 HTML 导航到另一个页面，请使用链接，而不是按钮。您可以使用 CSS 使其看起来像按钮。
3. 如果您希望 HTML 更改页面状态或提交或重置表单，请使用按钮。
4. 不要使用type="submit"，除非按钮位于表单内并且确实用于提交表单。默认情况下始终指定 type="button"，以避免意外行为。