javascript - Chrome 文本装饰线通过防止点击

Question

我正在编写一个网络应用程序，点击一段文本应该切换 line-through css 样式。这适用于 Firefox，但在应用样式后 click 事件似乎不会在 Chrome 中触发。

HTML:

<script>
    $(document).ready({
        $(".liner").click(toggleStrikethrough);
    });
<div class="liner">
    Hello World
</div>

JS(请注意，我使用了 jQuery，因为这是我在应用程序中使用的，但普通的解决方案也是可以接受的):

function toggleStrikethrough()
{
    if($(this).css("text-decoration") != "line-through")
        $(this).css("text-decoration","line-through");
    else
        $(this).css("text-decoration","");
}

JS Fiddle

Answer 1

在 CSS3 中，text-decoration有多个部分。在您的特定情况下，阅读 $(this).css("text-decoration")返回 line-through solid rgb(0, 0, 0) .

相反，尝试将 if 条件更改为 $(this).css("text-decoration-line")只获取文本修饰的线条样式部分。