不显眼但又可用的跨度按钮？

Question

我想使用 span 标签创建样式按钮，其作用或多或少类似于 标签。快速单击按钮不应选择其元素内部或外部的任何文本，或者根本不能选择文本，并且还应该有一个指针光标。

在 jQuery 中将普通的 标记分配给 .click() 事件可以正常工作，但不能像正确的按钮一样工作。我不知道如何实现这一点，除了使用 标记，使用 # 或 javascript: 链接来实现 href 属性。但这几乎违背了不引人注目的 JavaScript 的目的。另外，锚链接已经具有下划线文本和需要覆盖的颜色。

总而言之，如何才能实现一个不显眼的跨度按钮？不依赖锚点或实际的按钮输入标签。谢谢。

Answer 1

更新

您可以使用这些样式来防止选择：

-webkit-user-select:none;
-moz-user-select:none;

在此处查看演示

---

请注意< /em> 上面的内容仅适用于 webkit 和 mozilla 浏览器。

---

据我了解，jQuery 是为了最简单地做到不引人注目。你可以这样做：

$(function(){
    $('#span_id').click(function(){
      // your code here...
    });
});

注意标签是内联元素，你需要用使其块级 display:block 对其应用宽度 和高度 并使其看起来像一个按钮。

话虽如此，我想知道为什么你不能/不使用按钮来使你的代码在语义上有效。

Answer 2

这可能是一个疯狂的想法，但您可以使用按钮作为按钮。它们可以像其他东西一样设计。

Answer 3

“跨度按钮”

<span class="spanbutton" title="Span Button!" onclick="spanButtonFunction()">Span Button!</span>

样式：

.spanbutton {
    color:#000000;
    border:1px solid #000000;
    padding-left:8;
    padding-right:8px;
    border-radius:3px;
    cursor:pointer;
    font-family: arial;
    font-size:small;

    /*prevent selection*/
    -webkit-user-select:none;
    -moz-user-select:none;

    /* fallback */
    background-color:#EEEEEE;

    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CCCCCC),     to(#F4F4F4));

    /* Safari 5.1, Chrome 10+ */
    background: -webkit-linear-gradient(top, #F4F4F4, #CCCCCC);

    /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, #F4F4F4, #CCCCCC);

    /* IE 10 */
    background: -ms-linear-gradient(top, #F4F4F4, #CCCCCC);

    /* Opera 11.10+ */
    background: -o-linear-gradient(top, #F4F4F4, #CCCCCC);
}

当然还有按钮功能的脚本。

---

此外，当您单击按钮时，如果您想对按钮“中键单击”的外观进行编码，jQuery 将提供帮助：

$(document).ready(function (){
    $(".spanbutton").bind("mousedown", function(e){
            buttondown(this);
    });
    $(".spanbutton").bind("mouseup", function(e){
            buttonup(this);
    });
    $(".spanbutton").bind("mouseout", function(e){
            buttonup(this);
    });
});

function buttondown(button) {
    button.className = "downbutton";
}

function buttonup(button) {
    button.className = "spanbutton";
}

以及“向下”按钮的更多样式：

.downbutton {
    color:#000000;
    border:1px solid #333333;
    padding-left:8px;
    padding-right:8px;
    border-radius:3px;
    cursor:pointer;
    font-family: arial;
    font-size:small;

    /*prevent selection*/
    -webkit-user-select:none;
    -moz-user-select:none;

    background-color:#BBBBBB;
}

如果您喜欢，请投票！这将激励我做出更多像这样的详细回应