爲什麼'keyup'事件無法在CSS中進行更改？

Question

mouseleave事件能夠對CSS進行更改，但當ALT鍵被釋放時，keyup事件不會執行它應該進行的CSS更改。它干擾了mouseenter嗎？如果是的話，那麼如何解決這個問題呢？

$(document).on('mouseleave', '.el', function(e) { 
 
    $(this).css("background-color", "white"); 
 
    $(this).css("color", "black"); 
 

 
}); 
 

 
$(document).on('keyup', '.el', function(e) { 
 
    if (e.altKey) { 
 
    $(this).css("background-color", "white"); 
 
    $(this).css("color", "black"); 
 

 
    } 
 
}); 
 

 
$(document).on('mouseenter keypress', '.el', function(e) { 
 
    if (e.altKey) { 
 

 
    $(this).css("background-color", "#99DCFC"); 
 
    $(this).css("color", "red"); 
 

 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="t1" align="center" border=1> 
 
    <tr> 
 
    <th>First Name</th> 
 
    <th>Last Name</th> 
 
    <th>Email Address</th> 
 
    <th>Telephone Number</th> 
 
    </tr> 
 
    <tr id="r"> 
 
    <tbody> 
 
     <td id="d1" class="el" contenteditable="true"></td> 
 
     <td id="d2" class="el" contenteditable="true"></td> 
 
     <td id="d3" class="el" contenteditable="true"></td> 
 
     <td id="d4" class="el" contenteditable="true"></td> 
 
     <td> 
 
     <button id="del1">Delete</button> 
 
     </td> 
 
    </tbody> 
 
    </tr> 
 
</table>

Answer 1

有兩個問題與您的代碼：

1. 在keyup事件e.altKey將false因爲Alt鍵是剛剛發佈。嘗試通過e.which來測試實際的密鑰代碼。

2. 在事件處理程序中，this將引用事件發生的元素，除非該元素不一定是鼠標移過的元素，否則該元素似乎很明顯：對於鍵事件，它總是當時具有（鍵盤）焦點的元素。最簡單的解決方法是使用一個類而不是單獨設置CSS屬性，因爲那樣你可以通過說$(".highlight")而不是$(this)來從當前擁有它的任何元素中刪除該類。因此，您也不希望爲keyup委派事件處理程序，因爲焦點可能在當時所討論的元素的無。

$(document).on('mouseleave', '.el', function(e) { 
 
    $(this).removeClass("highlight"); 
 
}); 
 

 
$(document).on('keyup', function(e) { 
 
    if (e.which === 18) { 
 
    $(".highlight").removeClass("highlight"); 
 
    } 
 
}); 
 

 
$(document).on('mouseenter keypress', '.el', function(e) { 
 
    if (e.altKey) { 
 
    $(this).addClass("highlight"); 
 
    } 
 
});

.highlight { 
 
    background-color: #99DCFC; 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="t1" align="center" border=1> 
 
    <tr> 
 
    <th>First Name</th> 
 
    <th>Last Name</th> 
 
    <th>Email Address</th> 
 
    <th>Telephone Number</th> 
 
    </tr> 
 
    <tr id="r"> 
 
    <tbody> 
 
     <td id="d1" class="el" contenteditable="true"></td> 
 
     <td id="d2" class="el" contenteditable="true"></td> 
 
     <td id="d3" class="el" contenteditable="true"></td> 
 
     <td id="d4" class="el" contenteditable="true"></td> 
 
     <td> 
 
     <button id="del1">Delete</button> 
 
     </td> 
 
    </tbody> 
 
    </tr> 
 
</table>

還要注意，使用一個類來設置顏色比具有重複顏色代碼在獨立的功能更整潔。

（我覺得上面仍然是一個小馬車，但它應該讓你更接近到你想去的地方。）

Answer 2

e.altKey實際檢查事件已被解僱後，Alt鍵是否處於活動狀態。由於您正在設置keyup事件，因此事件觸發後，ALT鍵值爲而不是有效。嘗試更改if (e.altKey)至if (e.which === 18)。 e.which返回觸發事件的密鑰的密鑰代碼，18是ALT的密鑰代碼。