Link，由 Tampermonkey 创建，在 Chrome 中有效，但在 Firefox 中无效？

Question

我写了一个简单的脚本来将浮动按钮添加到一系列页面，这些页面根据某些功能重定向到 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>

你预计会发生什么？

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

如果您运行该代码并单击，那么目前您会得到：

在基于 Chromium 的浏览器上：Clicked: badLink。
在 Firefox 上：Clicked: badButton.

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

所以：

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

Link，由 Tampermonkey 创建，在 Chrome 中有效，但在 Firefox 中无效？

Link, created by Tampermonkey, works in Chrome but not in Firefox?

html

javascript

greasemonkey

tampermonkey