Почему событие «keyup» неспособно внести изменения в CSS?

Question

Почему событие «keyup» неспособно внести изменения в CSS?

Событие mouseleave может делать изменения CSS, но когда ALTключ освобождается, $ ( document ). on ( 'mouseleave' , '.el' , function ( e ) { $ ( this ). css ( «background-color» , «white» ), $ ( this ). css ( «цвет» , «черный» ); }); $ ( документ ). on ( 'keyup' , '.el' , функция ( e ) { if ( e . altKey ) { $ ( this ). css ( «background-color» , «white» ); $ ( это ). css ( «цвет» , «черный» ); } }); $ ( документ ). on ( 'mouseenter keypress' , '.el' , function ( e ) { if ( e . altKey ) { $ ( this ). css ( "background-color" , "# 99DCFC" ); $ ( this ). css ( «цвет» , «красный» ); } }); событие не выполняет изменения CSS, которые он должен использовать. Это мешает мышиному центру? если да, то как решить проблему?

e.altKey

false

javascript,jquery,html,css,

Ответов: 2

score 5 · Accepted Answer

В коде есть две проблемы:

В этом случае $(".highlight")это будет falseпотому, что Alt был только что выпущен. Попробуйте вместо этого проверить фактический код ключа $(this).
Внутри обработчика события thisбудет ссылаться на элемент, для которого произошло событие, что кажется очевидным, за исключением того, что этот элемент не обязательно является тем, над которым находится мышь: для ключевого события всегда будет элемент, который имеет (клавиатуру ) сосредоточиться в то время. Простейшим решением для этого является использование класса вместо настройки свойств CSS по отдельности, потому что тогда вы можете просто удалить класс из того, что в настоящее время имеет его элемент, 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"); } });keyup

.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>

e.altKey

Также обратите внимание, что использование класса для установки цветов более аккуратно, чем повторение цветовых кодов в отдельных функциях.

(Я думаю, что выше все еще немного плохой, но он должен приблизить вас к тому, где вы хотите быть.)

score 1 · Accepted Answer

keyupфактически проверяет, активен ли ключ alt после того, как событие было запущено. Поскольку вы устанавливаете keyupсобытие, ALTключ не активируется после запуска события. Попробуйте изменить if (e.altKey) к if (e.which === 18). e.whichвозвращает код ключа ключа, вызвавшего событие, а 18 - код ключа для ALT.