Chromeのテキスト装飾ラインスルーがクリックを防止する

テキストの一部をクリックするとline-through CSSスタイルを切り替える必要があるウェブアプリケーションをプログラミングしています。これはFirefoxでも機能しますが、スタイルが適用されてからChromeで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

出典

2017-08-28 Aliden

CSS3では、text-decorationには複数の部分があります。具体的なケースでは、$(this).css("text-decoration")はline-through solid rgb(0, 0, 0)となります。

代わりに、if条件を$(this).css("text-decoration-line")に変更して、テキスト装飾の線スタイル部分のみを取得してみてください。

出典

2017-08-28 19:12:06 Jeremy

私はあなたの問題を別の方法で解決しようとしました。私はそれが成功したと思う。下記のコードを使用して、同じ出力を得ることができます。

$('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>

私は、このためのtoggleClass方法をバインドを使用。その結果、jsコードは単純で効率的に動作することができました。

出典

2017-08-28 19:58:39

Chromeのテキスト装飾ラインスルーがクリックを防止する

答えて

関連する問題