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;不要这样编码！

考虑：

＆＃13;

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);
} );

＆＃13;

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

＆＃13;

您期望会发生什么？

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

如果您运行该代码并单击，则当前您将获得：

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

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

所以：

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

由Tampermonkey创建的链接适用于Chrome但不适用于Firefox？

1 个答案: