Chrome text-decoration line-through 防止点击答案

【问题标题】：Chrome text-decoration line-through prevents clickChrome text-decoration line-through 防止点击
【发布时间】：2017-08-28 19:06:32
【问题描述】：

我正在编写一个 Web 应用程序，在该应用程序中单击一些文本应该切换 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

【问题讨论】：

标签： javascript jquery css google-chrome

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我尝试使用不同的方式解决您的问题。我认为它成功了。您可以使用下面提到的代码来获得您想要的相同输出。

  $('div').bind('click',function(){
        $(this).toggleClass('liner');
   });

.liner{
    text-decoration:line-through;
}

<!doctype html>
    <html lang="en">
    
<head>
    <meta charset="utf-8">
    <title>jQuery Exzmple</title>
    <style>

    </style>    
</head>
<body>
     <div class="liner">Hello World</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</body>
</html>

我为此使用了 bind 、 toggleClass 方法。结果js代码简单，运行效率高。

【讨论】：