Chrome文字装饰直通可防止点击

Question

我正在编写一个Web应用程序，在该应用程序上单击一点文本应可切换line-through CSS样式。 这适用于Firefox，但是一旦应用了样式，Chrome中就不会触发click事件。

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小提琴

Answer 1

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

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

Answer 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代码很简单，并且可以高效运行。

Chrome文字装饰直通可防止点击

问题描述

2 个解决方案

解决方案1
3 已采纳 2017-08-28 19:12:06

解决方案2
1 2017-08-28 19:58:39

Chrome文字装饰直通可防止点击

问题描述

2 个解决方案

解决方案1 3 已采纳 2017-08-28 19:12:06

解决方案2 1 2017-08-28 19:58:39

解决方案1
3 已采纳 2017-08-28 19:12:06

解决方案2
1 2017-08-28 19:58:39