由 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>

你预计会发生什么？

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

如果你运行该代码并点击，那么当前你会得到：

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

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

所以：

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