Chrome文字修飾直通功能可以防止點擊

我正在編寫一個網頁應用程序，點擊一些文字應切換line-through css風格。這適用於Firefox，但在Chrome應用後，Chrome瀏覽器似乎不會觸發Chrome瀏覽器。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文字修飾直通功能可以防止點擊

回答

相關問題