石家庄网站建设：什么时候按钮不是按钮？

2019.08.13 mf_web

182

石家庄网站建设假设您有一个界面的一部分，用户点击并发生了一些事情。对我来说听起来像是一个按钮，但现在我们称之为“点击之物”。我知道，你也确信它也是一个按钮：它是圆润的，突出了一个很好的番茄色，要求与之互动。但是让我们暂时考虑一下。从长远来看，这将节省时间，我保证。

番茄纽扣式的东西，上面有'Something'文字。 — 为'clicky thing'设计（大预览）

如果这个点击的东西中的文字是“阅读更多”，然后点击它会引导用户访问另一个页面上的文章怎么办？嗯。如果有一个蓝色下划线的单词“关闭”，那会关闭弹出对话框怎么办？这是一个链接只是因为它是蓝色和下划线？当然不是。

哇！似乎没有办法只是通过查看它来判断它是链接还是按钮。太疯狂了！在选择正确的元素之前，我们需要了解这件事情的作用。但是，如果我们不知道它现在做了什么或者只是混淆了怎么办？那么，我们有一个方便的流程图：

流程图：这是一个按钮。如果没有，那么它就是一个链接。而已。 — 选择正确元素的科学流程图（大预览）

这是一个按钮。
如果没有，那么它就是一个链接。
而已。

那么，一切都是按钮吗？不，但您可以随时开始使用几乎任何可以以类似方式单击或交互的元素的按钮。如果它缺少某些东西，比如导航到另一个页面，请改用链接。不，指针不是制造它的理由<a href>。我们有cursor: pointer这个。

聚焦番茄按钮，上面有'Something'文字 — 不要忘记提供焦点风格。（大预览）

好吧，这是一个<button>按钮 - 我们同意这一点。让我们把它放在我们的模板中并根据设计设计它：一些填充，圆角，番茄填充，白色文本，甚至一些焦点样式。哦，你真好。

<button type="button" class="button">
    Something</button><style>
    .button {
        display: inline-block;
        padding: 10px 20px;
        border-radius: 20px;
        background-color: tomato;
        color: white;
    }
    .button:focus {
        outline: none;
        box-shadow: 0 0 0 5px #006AE3;
    }</style>

这没多久。你想快速建造它并吃一些午餐因为你饿了。好吧，让我们看看它的外观和开始。

看起来很丑的番茄按钮，在浏览器中呈现 — 有时浏览器不是你最好的朋友。（大预览）

哦，我的上帝！浏览器出了点问题。为什么这个按钮太丑了？文字是微小的，尽管我们已经明确地设置body到16px，甚至font-family是错误的。带有愚蠢伪影的圆形边框非常复古，甚至还没有趋势。

啊，这是浏览器的默认样式。你需要小心地撤消它，甚至添加Normalize.css或Reset.css ...或者你可以使用a <div>而忘记它。是不是很快就能解决他们付出的问题？你饿了，这根本没有帮助。但你是一个专业人士：把自己拉到一起思考。

a <button>和a 之间有什么区别<div>？内置<button>是一个交互元素，这意味着它可以与之交互。这很深。您可以单击它，您可以使用键盘关注它，它还可以button向屏幕阅读器传达一个可访问的角色，使用户可以理解它是一个按钮。

令人印象深刻！您不仅了解HTML的<button>元素，还了解ARIA和屏幕阅读器支持方面的一两件事。您甚至可能尝试使用VoiceOver或NVDA来测试接口的可访问性。

所以，你决定做一个技巧。您不会弄乱浏览器的样式，并且您将使元素看起来像是可能需要它的用户的正确交互式按钮。那太聪明了！

<div class="button" tabindex="0" role="button">
    Something</div>

现在它不仅看起来正确，而且由于tabindex="0"属性，它可通过键盘聚焦，屏幕阅读器会将其视为一个合适的按钮，因为你明智地添加role="button"了它。然后Git提交&&推！这件事还有一些额外的任务，但我们已经完成了造型。什么可能出错？午餐时间。好的，我们走吧！

一小时后…

那是一顿美味的午餐！让我们回到我们的点击之物。我们需要在继续之前完成一些任务。让我们看看...我们需要在doSomething单击按钮后调用一个函数，并且应该有一种方法可以禁用该按钮，使其无法点击。听起来很容易。让我们为这个按钮添加一个事件监听器：

<script>
    const buttons = document.querySelectorAll('.button');
    [...buttons].forEach(button => {
        button.addEventListener('click', doSomething);
    });
    function doSomething() {
        console.log('Something!');
    }</script>

完成。用户现在可以在桌面上用鼠标单击它，然后用手指在触摸屏上点击它。点击事件会可靠地触发，你会看到很多东西！在你的控制台中。接下来的任务是什么？

坚持，稍等！我们需要确保键盘用户的工作方式相同。因为我们tabindex="0"在按钮上有这个，它可以被聚焦，一旦它聚焦，用户应该能够按空格键或“Enter”键来触发我们所附加的任何东西。

因此，我们需要附加另一个事件监听器来捕获所有密钥，我们将仅针对某些密钥触发我们的函数。感谢上帝，触摸设备非常智能，可以将所有点击转换为点击; 否则，我们也必须附上一堆触摸事件。

<script>
    const buttons = document.querySelectorAll('.button');
    [...buttons].forEach(button => {
        button.addEventListener('click', doSomething);
        button.addEventListener('keyup', (event) => {
            if (event.key == 'Enter' || event.key == ' ') {
                doSomething();
            }
        });
    });
    function doSomething() {
        console.log('Something!');
    }</script>

唷！现在我们可以通过键盘完全访问我们的点击内容。我很为你骄傲！JavaScript真的很神奇 - 没有它我们会怎么做？

好吧，最后一项任务是什么：“按钮应该具有禁用状态，将其外观和行为改变为麻木状态。” 麻木？我想这意味着灰色并且对交互没有反应。好的，让我们使用BEM命名在样式表中添加一个状态。

<div class="button button--disabled" tabindex="0" role="button">
    Something</div><style>
    .button--disabled {
        background-color: #9B9B9B;
    }</style>

这看起来很麻木。每当需要禁用按钮时，我们将添加button--disabled修改器以使其变灰。但它还没有麻木：它仍然可以通过指针和键盘进行聚焦和触发。

Darn，这变得棘手了。

不仅如此，按钮不应该以Tab键顺序访问，这意味着该tabindex属性不应该存在。我们需要检查按钮是否处于禁用状态，然后停止触发我们的功能。此外，可以动态应用此修饰符。虽然CSS在运行中使用选择器匹配元素并应用样式不是问题，但我们可能需要某种变异观察器来触发此按钮的其他更改。

我知道，对吧？我们认为这将是一个简单的小按钮，触发一个功能并具有禁用状态。我们试图通过可访问性和所有这些东西来实现它，现在我们已经深入了解这个兔子洞。

我们来点一些外卖食品。在我们完成并正确测试之前，我们不会回家吃饭。血淋淋的W3C！他们为什么不试着让我们的生活更轻松？好像他们关心我们！

事实上，他们做......

在进入这个烂摊子之前，我们先退一步吧。为什么我们不尝试使用<button>元素做这些事情？它有一些有用的技巧，而不仅仅是浏览器的丑陋风格。哦，不要忘记type="button"- 你不希望弹出窗口的“关闭”按钮意外提交表单，因为type="submit"它是默认值。

显然，当<button>聚焦并按下空格键或“Enter”键时，它将触发click事件，就像移动设备在他们获得点击，拍子，舔或其他任何他们今天能够接收的内容时所做的那样。我们的代码中有一个事件监听器更少！尼斯。

// A click is enough!button.addEventListener('click', doSomething);

对于禁用状态，该disabled属性可用于<button>元素以及所有表单元素，包括<fieldset>。不开玩笑。您是否知道只需将一个属性应用于父级，就可以禁用一大堆输入组合在一起<fieldset>？

<fieldset disabled>
    <legend>A bunch of numb inputs</legend>
    <p>
        <label>
            <input type="radio" name="option">
            Of course it’s a link
        </label>
    </p>
    <p>
        <label>
            <input type="radio" name="option">
            Obviously, it’s a button
        </label>
    </p>
    <p>
        <label>
            <input type="radio" name="option">
            I just wanna go home
        </label>
    </p>
    <button type="button">Button</button></fieldset>

现在你知道了！此属性不仅禁用表单元素上的所有事件，还会从Tab键顺序中删除它们。问题解决了！

<button disabled type="button" class="button">
    Something</button>

但等等，还有更多！它还触发:disabledCSS中的伪类，这意味着我们可以摆脱BEM修饰符来声明样式并使用内置的动态修饰符。

.button:disabled {
    background-color: #9B9B9B;}

至于浏览器的丑陋风格，我们不必使用所有Normalize.css来修复单个按钮。使用它作为智慧的来源：下面的三个额外的行将解决大多数恼人的差异<div>。如果您需要更多，可以从中相关部件。

.button {
    font-size: 100%;
    font-family: inherit;
    border: none;}

完成。毕竟HTML并不是那么糟糕！

但是，如果您偶尔会感到惊讶，请务必检查HTML规范以获取答案。多年来，它变得更加友好，并且它充满了良好的使用和可访问性示例。当然，好的' HTML5 Doctor仍然是一个可靠的地方，可以找出元素和元素之间的区别，<section>并<article>检查文档大纲是否是一个东西（不是真的）。很有可能你最终也会阅读Mozilla的HTML文档，你也不会后悔。

这个任务现在完成了！下一步是什么？带搜索字段的下拉式轮播日历？天啊！祝你好运。但请记住：这<button>是你的朋友！

石家庄网站建设