Блог

Главная - Вопросы по программированию - Событие щелчка jQuery не работает в браузерах iPhone (уже пробовал cursor: pointer;)

Событие щелчка jQuery не работает в браузерах iPhone (уже пробовал cursor: pointer;)

#jquery #ios #css #click

#jquery #iOS #css #нажмите

Вопрос:

Я хочу установить событие щелчка по тегам привязки на моем сайте WordPress. Я смог заставить его работать на всех моих устройствах (ПК, телефоне Android, планшете), кроме моего iPhone.

Я попытался установить «Курсор» на «Указатель» для тегов привязки, но безрезультатно.

Я перепробовал все, что смог найти на SO, и, похоже, ничего не работает :/

Любая помощь будет оценена.

 $("a[href^=#]").on('click touchstart', function(e) {
      e.preventDefault(); var dest = $(this).attr('href');
      console.log(dest);
      $('html,body').animate({ scrollTop: $(dest).offset().top }, 'slow');
    }); 
 .scroller {
        cursor: pointer;
    } 
 <a href="#res-mobile" class="scroller" onclick="void(0)">
  <div id="mobile-hero-book" class="book-now-btn">Book a Car</div>
</a>

Комментарии:

1. атрибут onclick не нужен в теге привязки, потому что у вас есть обработчик добавления с помощью jQuery

Ответ №1:

Итак, если я понял, что вы вместо использования href можете попробовать использовать onclick функцию, JS подобную этой:

 function ANYTHING() {
   $("a[href^=#]").on('click touchstart', function(e) {
   e.preventDefault(); var dest = $(this).attr('href');  
   console.log(dest);
   $('html,body').animate({ scrollTop: $(dest).offset().top }, 'slow');
  });
} 
 .scroller {
            cursor: pointer;
        } 
 <a class="scroller" onclick="void(0)" onclick='ANYTHING('>
   <div id="mobile-hero-book" class="book-now-btn">Book a Car</div>
</a>

Пожалуйста, дайте мне знать, если это помогло! Вы все равно можете сохранить href в html , если вам это нужно!

Ответ №2:

Попробуйте этот небольшой плагин jQuery, который я написал только для проблемы, с которой вы столкнулись:

 $(document).ready(function() {
  $("#stupid-button").touch(function() {
    console.log("The stupid button was pressed!");
  });
});

$.fn.touch = function(callback) {
  var touch = false;
  $(this).on("click", function(e) {
    if (!touch) {
      console.log("Click detected!");
      let callbackReal = callback.bind(this);
      callbackReal(this, e);
    } else {
      touch = true;
    }
    touch = false;
  });
  $(this).on("touchstart", function(e) {
    $(this).blur();
    if (typeof e.touches != typeof undefined) {
      e.preventDefault();
      touch = true;
      console.log("Touch detected!");
      let callbackReal = callback.bind(this);
      callbackReal(this, e);
    }
  });
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="stupid-button">Click Me</button>

РЕДАКТИРОВАТЬ 1:

Удалено

РЕДАКТИРОВАТЬ 2:

Я неправильно понял вопрос. Приведенный выше код по-прежнему полезен для устройств iOS, но вот что вам следует сделать для обработки тегов привязки. Избавьтесь от #id href:

 $(document).ready(function() {
  $(".anchor").touch(function() {
    var targ = $("#"   $(this).data('targ'));
    $('html,body').animate({
      scrollTop: targ.offset().top
    }, 'slow');
  });
});

$.fn.touch = function(callback) {
  var touch = false;
  $(this).on("click", function(e) {
    if (!touch) {
      console.log("Click detected!");
      let callbackReal = callback.bind(this);
      callbackReal(this, e);
    } else {
      touch = true;
    }
    touch = false;
  });
  $(this).on("touchstart", function(e) {
    $(this).blur();
    if (typeof e.touches != typeof undefined) {
      e.preventDefault();
      touch = true;
      console.log("Touch detected!");
      let callbackReal = callback.bind(this);
      callbackReal(this, e);
    }
  });
} 
 #target-ele {
  margin-top: 1200px;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="javascript:void(0);" class="anchor" id="link-1" data-targ="target-ele">Click Me</a>

<div id="target-ele">
  <p>This is the target container</p>
</div>

Метки: