链接由Tampermonkey创建,可以在Chrome中使用,但不能在Firefox中使用?[副本]

该代码在语义上不明确 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" 默认情况下,以避免意外行为。