Событие контекстного меню, скрывающее мышь на Android

У меня есть изображение, и мне нужно измерить, как долго пользователь касается изображения или нажимает ли мышь на изображение. Поэтому я использую событие наведения мыши, чтобы получить время начала, и событие наведения мыши, чтобы получить время окончания. Однако при работе на устройстве Android долгое касание вызывает всплывающее контекстное меню, чего я не хочу. Я могу скрыть контекстное меню, добавив функцию в событие контекстного меню и вернув из него false. Контекстное меню заблокировано и не отображается. НО событие подъема мыши также не срабатывает.

Как заблокировать контекстное меню и по-прежнему иметь событие мыши?

Jsfiddle [здесь][1]

  [1]: https://jsfiddle.net/vghk9q53/5/

javascript mobile-browser
person Mikhail Chibel    schedule 08.03.2017    source источник
comment
Вы пробовали touchstart и touchend?   -  person Mazz    schedule 08.03.2017
comment
Можете ли вы преобразовать свой комментарий в ответ, я приму его.   -  person Mikhail Chibel    schedule 08.03.2017
comment
готово, добро пожаловать :)   -  person Mazz    schedule 09.03.2017

Ответы (2)


arrow_upward
1
arrow_downward

Вместо использования mousedown и mouseup вы должны использовать touchstart и touchend

person Mazz    schedule 09.03.2017

arrow_upward
0
arrow_downward

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

<body>
  <img id="image" src="https://launchbit.com/carbon-i/6496-ZenHubCarbon.png" alt="" border="0" height="100" width="130" style="max-width: 130px;">
  <textarea id="text" rows="25"></textarea>
  <script>
    function printOutput(txt) {
      console.log(txt);
      document.getElementById("text").value = document.getElementById("text").value + txt + "\n";
    }
    window.addEventListener("load", function(event) {
      document.getElementById("image").oncontextmenu = function() {
        printOutput("context menu");
        return false;
      };
      document.getElementById("image").addEventListener("mousedown", function() {
        printOutput("mouse down");
      });
      document.getElementById("image").addEventListener("mouseup", function() {
        printOutput("mouse up");
      });
      document.getElementById("image").addEventListener("touchstart", function() {
        printOutput("touchstart");
      }, false);
      document.getElementById("image").addEventListener("touchend", function() {
        printOutput("touchend");
      }, false);
      document.getElementById("image").addEventListener("touchcancel", function() {
        printOutput("touchcancel");
      }, false);
      document.getElementById("image").addEventListener("touchmove", function() {
        printOutput("touchmove");
      }, false);
    });
  </script>
</body>

person Mikhail Chibel    schedule 08.03.2017