Событие onClick ссылки jQuery отправляет изображение - как вместо этого получить объект ссылки?

#javascript #jquery #django #ajax #django-templates

#javascript #jquery #django #ajax #django-шаблоны

Вопрос:

У меня есть выпадающий список с изображением и текстом для каждого элемента ссылки. Теги данных находятся на ссылке, которая переносит как текст, так и изображение. Когда я нажимаю на текст, jQuery.fn.init выдает мне выпадающий элемент, как я и ожидал, но если щелкнуть по изображению, вместо этого он выдает мне объект изображения с выпадающим элементом в качестве родительского.

Я думал, что правильно указал фильтр при вызове функции, но, очевидно, нет — кто-нибудь может указать мне правильное направление?

Структура выпадающего списка:

 <a class="dropdown-item" href="/i18n/setlang/" data-nextpage="/ca" data-languagecode="ca">
<img src="/static/ca.png" class="d-inline-block align-middle pb-1" alt="" loading="lazy">
amp;nbsp;Català
</a>

Запуск скрипта:

 $(document).ready(function() {

        $('#languagelist a').on('click', function(event) {
            event.preventDefault();
            let target = $(event.target);
            let nextpage = target.data('nextpage');
            let url = target.attr('href');
            let language_code = target.data('languagecode');
            .....

Я думал, что указание ‘a’ просто даст мне объект ссылки, но при нажатии на изображение это то, что становится целью (очевидно, без тегов данных).

Любая помощь очень ценится 🙂

Ответ №1:

Проблема в том, что target событие всегда является элементом в нижней части дерева DOM, который вызвал событие, а не элементом, который прослушал событие.

Для достижения того, что вам требуется, вы можете либо использовать event.currentTarget , либо this ссылку в функции обработчика событий jQuery, поскольку оба они относятся к элементу, к которому подключен прослушиватель. Попробуйте это:

 jQuery($ => {
  $('#languagelist a').on('click', function(e) {
    e.preventDefault();
    
    // when clicking on the <img />
    console.log(this); // = <a />
    console.log(event.currentTarget); // = <a />
    console.log(event.target) // = <img />
  });
});

 img {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #C00;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="languagelist">
  <a class="dropdown-item" href="/i18n/setlang/" data-nextpage="/ca" data-languagecode="ca">
    <img src="/static/ca.png" class="d-inline-block align-middle pb-1" alt="" loading="lazy"> amp;nbsp;Català
  </a>
</div>