Почему событие «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, которые он должен использовать. Это мешает мышиному центру? если да, то как решить проблему?

<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> Имя </ th> <th> Фамилия </ th> <th> Адрес электронной почты </ th> <th> Номер телефона </ 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" > Удалить </ button> </ td> </ tbody> </ tr> </ table> "data-console =" true "data-babel =" false ">
e.altKey
false

javascript,jquery,html,css,

0

Ответов: 2


5 принят

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

  1. В этом случае $(".highlight")это будет falseпотому, что Alt был только что выпущен. Попробуйте вместо этого проверить фактический код ключа $(this).

  2. Внутри обработчика события 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

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

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


1

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

JavaScript, JQuery, HTML, CSS,
Похожие вопросы