Почему console.log не может работать, когда происходит размытие? - PullRequest
Новая
       23

Почему console.log не может работать, когда происходит размытие?

0 голосов
/ 09 октября 2018 

 
function  fix(event){
    console.log("hello");        
} 
document.addEventListener("blur",fix,false);
 
 
<table>
	<tr>
        <td>class</td>
        <td><input type="text" class="data"></td>
	</tr>
	<tr>
        <td>name</td>
        <td><input type="text" class="data"></td>
	</tr>
</table>

Такая простая функция js.
Я хочу, чтобы console.log выполнялось, когда происходит событие размытия, независимо от того, фокус мыши исчезает с какого входа, hello показатьна консоли.
Что не так с моей функцией исправления?

Ответы [ 2 ]

0 голосов
/ 09 октября 2018

Pass true в качестве аргумента useCapture .Как отмечено в Документах MDN для делегирования событий , может также потребоваться использование фокуса. 

function fix(event) {
  console.log("hello");
}
document.addEventListener("blur", fix, true);
<table>
  <tr>
    <td>class</td>
    <td><input type="text" class="data"></td>
  </tr>
  <tr>
    <td>name</td>
    <td><input type="text" class="data"></td>
  </tr>
</table>

Как указано в MDN Документах для общей информации о событии различные браузеры различаются по тому, как они слушают событие:

Примечание. Значение Document.activeElement варьируется в зависимости от браузера во время обработки этого события (ошибка 452307): IE10 устанавливает его для элемента, на который будет перемещен фокус, в то время как Firefox и Chrome часто устанавливают его в телодокумент.

0 голосов
/ 09 октября 2018

blur не всплывает, поэтому он не будет виден, если вы будете использовать такое делегирование событий - вы увидите событие blur только в том случае, если его прослушиватель подключен непосредственно к рассматриваемому элементу.Если вы хотите использовать делегирование событий, вместо этого прослушайте событие focusout: 

function fix(event) {
  console.log("hello");
}
document.addEventListener("focusout", fix, false);
<table>
  <tr>
    <td>class</td>
    <input type="text" class="data"></td>
  </tr>
  <tr>
    <td>name</td>
    <td><input type="text" class="data"></td>
  </tr>
</table>

Другая возможность заключается в прослушивании события blur на этапе захвата: 

function fix(event) {
  console.log("hello");
}
document.addEventListener("blur", fix, true);
//                                     ^^^^
<table>
  <tr>
    <td>class</td>
    <input type="text" class="data"></td>
  </tr>
  <tr>
    <td>name</td>
    <td><input type="text" class="data"></td>
  </tr>
</table>
...