0

在下面的代码中，我有一个 id='questionaire' 的按钮。当用户单击按钮时，我想将事件保存到本地存储中，以便下次用户打开页面时不会显示该按钮。

我之前设法用 window.onload=function(){} 脚本做到了这一点，但是如果单击了该按钮，该按钮会出现片刻然后消失。这看起来不太好。

<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Storage?</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <?php
        echo "
        <form>
            <input type='button' class='button' value='Question' id='questionaire'>
        </form>
        ";

        echo "<script type='text/javascript'>
                document.getElementById('questionaire').onclick = function() {
                    localStorage.clicked = 'true';
                }
            </script>";
... <More HTML code> ...
    ?>      
</body>
</html>
4

1 回答 1

1

也许您应该始终隐藏按钮并在之前未单击它时显示它。

当它首先隐藏时，您将不会为已经点击它的用户获得闪烁的按钮！

这无济于事。因为这个按钮是页面中最顶层的元素，如果我没有在第一个地方显示它，然后在页面加载后显示它，那么所有其他元素都会移动。我已经编辑了问题

将按钮包装在具有按钮尺寸的 div 中！然后什么都没有动

<div style="width: XXpx; height: XXpx; display: inline-block;">
    <input type='button' class='button' value='Question' id='questionaire'>
</div>

您的问题是“无样式内容的闪光”，当您使用 js 显示或隐藏加载按钮时，您的页面会移动，除非您在操作完成之前隐藏所有内容！

您可以尝试在谷歌上搜索“避免无样式内容的闪烁”或阅读以下内容：避免无样式内容的闪烁

于 2013-08-08T06:52:34.867 回答