Как использовать событие размытия для тега <img> - PullRequest
Новая
       21

Как использовать событие размытия для тега <img>

0 голосов
/ 25 февраля 2020

Мне нужно закрыть div, когда я нажимаю в любом месте экрана, кроме изображения. Функция onblur даже не вызывает alert. Пожалуйста, помогите. 

$('.myClass').on('blur', function() {
  alert("test");
  $('.divClass').hide();
});
image

Ответы [ 3 ]

1 голос
/ 25 февраля 2020

<img> элементам по умолчанию не может быть дан фокус. Если они не могут быть сфокусированы, то они не могут потерять фокус и, таким образом, вызвать событие blur. Хотя вы можете использовать tabindex, чтобы изменить это, вам нужно будет выполнить кучу других действий (например, добавить ARIA), чтобы сделать его доступным. Вам лучше использовать semanti c HTML для начала.

  1. Оберните <img> элементом <button type="button">.
  2. Переместите обработчики событий из img в button
  3. Примените CSS, чтобы удалить из стиля по умолчанию (например, границы и цвет фона) кнопки как тебе нравится.
0 голосов
/ 26 февраля 2020

Вы можете обернуть img элементом button. Затем вы можете запустить событие blur & focus для кнопки, так как по умолчанию img не имеет события blur. 

$('.myClass').on('blur', function(){
  $('.divClass').hide();
});
.btn-forimg{
  padding: 0;
  margin: 0;
  border: none;
  box-shadow: none;
  outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="btn-forimg myClass"><img src="https://i.stack.imgur.com/fcbpv.jpg" width="50"></button>
<div class="divClass">This div will disappear when button blur</div>
0 голосов
/ 25 февраля 2020

По умолчанию элементы img не могут иметь фокус, поэтому по доверенности они не могут вызвать событие blur. Чтобы обойти это, вы можете добавить атрибут tabindex к img, чтобы его можно было выбрать. Затем он вызовет событие blur.

Обратите внимание, что это может повлиять на поведение программ чтения с экрана и других инструментов доступности, в зависимости от структуры и содержания вашей страницы, поэтому используйте эту технику осторожно. 

$('.myClass').on('blur', function() {
  console.log("test");
  $('.divClass').hide();
});
.myClass {
  margin-top: -42px!important;
  margin-left: 145px !important;
  position: relative;
  outline: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="myImg.png" height="23" width="18" class="myClass" tabindex="1" />

<div class="divClass">I will hide when the img loses focus...</div>
...