event.preventDefault () не работает в любом браузере

У меня есть следующий тег, созданный WP Bakery's Post Masonry Grid:

<a href="https://www.domain.nl/some-page/" class="vc_gitem-link vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-rounded vc_btn3-style-modern vc_btn3-o-empty vc_btn3-color-grey" title="some value in the title"><span class="vc_btn3-placeholder">&nbsp;</span></a>

Когда эта ссылка зависнет, на элементе сетки появляется цветная надпись. На мобильном уровне этот эффект не виден. Я хочу, когда пользователь нажимает на эту ссылку, наложение появляется до активации ссылки. Я пробовал это со следующим кодом jQuery:

$('.project-item .vc_btn3-container a').click(function(event) {
        // Remember the link href
        var href = this.href;

        // Don't follow the link
        event.preventDefault();

        // Do the async thing
        overlayActive(function() {
            if($(window).width() <= 480) {
                console.log('it works');
                $(this).parent().parent().find('project-overlay-color').css('transform', 'scale(1,1)');
                // go to the link
                window.location = href;
            }
        });
    });

Это не работает в любом браузере. Кроме того, я не могу найти «он работает» в журнале консоли. Я попытался поместить его в функцию щелчка, но журнал консоли остается пустым.

Когда я использую инспектор в Chrome и устанавливаю его на мобильное устройство (например, iphone X), наложение появляется до активации ссылки, когда я нажимаю на ссылку. Однако на моем мобильном устройстве оверлей не появится.

Как я могу получить оверлей, чтобы он появился до того, как ссылка активирована и перейдет на страницу?

javascript,html,css,

-2

Ответов: 1


1

Ваш селектор плохой vc_btn3-containerне существует. Попробуй это:

JS

$('.vc_gitem-link').click(function(event) {
  // Remember the link href
  var href = this.href;

  // Don't follow the link
  event.preventDefault();

  // Do the async thing
  overlayActive(function() {
    if($(window).width() <= 480) {
      console.log('it works');
      $(this).parent().parent().find('project-overlay-color').css('transform', 'scale(1,1)');
      // go to the link
      window.location = href;
    }
  });
});

демонстрация

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