Как показать анимацию CSS при долгом нажатии на мобильном браузере iOS? - PullRequest
0 голосов
/ 09 октября 2019

Мне бы хотелось, чтобы долгое нажатие на мобильном устройстве iOS работало так, как я это делал на мобильном телефоне Android, и это то же самое действие, с которым я начал работать в Интернете.

Я пытался использовать код из вопросов и ответов здесь ( Длительное нажатие кнопки на iOS (Javascript) ), но я не могу заставить его работать, и это ломает то, что яначал работать на Android и в Интернете.

Вот javascript, который работает для Android и в Интернете:

document.oncontextmenu = document.body.oncontextmenu = function() {return false;}

var rectangle = $("#Rectangle");
var speechBubble = $("#SpeechBubble");

rectangle.hover (
  function() {
    speechBubble.css({
      "animation-name": "expand-bounce",
      "animation-duration": "0.25s"
    });
  },
  function() {
    speechBubble.css({
      "animation-name": "shrink",
      "animation-duration": "0.1s"
    });
  }
);

Вот javascript, который не работает на iOS:

document.oncontextmenu = document.body.oncontextmenu = function() {return false;}

var rectangle = $("#Rectangle");
var speechBubble = $("#SpeechBubble");
var timer

rectangle.addEventListener('touchstart', function() {
  timer = setTimeout(function() {
    speechBubble.css({
      "animation-name": "expand-bounce",
      "animation-duration": "0.25s"
    });
  }, 1000)
}, false)

rectangle.addEventListener('touchend', function() {
  clearTimeout(timer), 
     speechBubble.css({
      "animation-name": "shrink",
      "animation-duration": "0.1s"
    });
}, false)

Ожидаемый результат заключается в том, что когда пользователь наводит курсор (в Интернете) на прямоугольник или долго нажимает на мобильном телефоне, в котором оживляется речевой пузырь, и, когда пользователь перемещает курсор или их палец, речевой пузырь оживляется. Фактический результат заключается в том, что это происходит в Интернете. На Android речевой пузырь остается после долгого нажатия, но исчезает, когда пользователь долго нажимает другой речевой пузырь (я в порядке с этим). На iOS без реализации вышеописанной попытки javascript речевой пузырь появляется только при нажатии прямо перед открытием ссылки, и долгое нажатие ничего не делает (но, кажется, я успешно отключил меню по умолчанию).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...