Использование перехода с касанием событиями касания в Chrome

Я хочу использовать эффект затухания с событиями касания в Chrome, но блокирует блокировку событий.Использование перехода с касанием событиями касания в Chrome

В этом fiddle есть простой код, чтобы затухать для touchstart и исчезать для событий touchhend. Когда начинается ваше прикосновение, все в порядке. Вы можете удалить свой палец и снова коснуться в течение 1 секунды, и вы можете видеть, как исчезает вовнутрь. Но когда время достигает ровно 1 секунду, непрозрачность достигает 0, а прикосновения блокируются.

Проблема с ошибкой или кодировкой?

Спасибо,

<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <style type="text/css"> 
     .border { 
      border:1px solid red; 
      height: 300px; 
     } 
     .visible { 
      opacity: 1; 
      transition: opacity 1s linear; 
     } 
     .hidden { 
      opacity: 0; 
      transition: opacity 1s linear; 
     } 
    </style> 
    <script type="text/javascript"> 
     window.onload=function(){ 
      var div = document.getElementsByName('div')[0]; 
      div.addEventListener('touchstart', function (e) { 
       div.className = 'border visible'; 
      }); 
      div.addEventListener('touchend', function(e){ 
       div.className = 'border hidden'; 
      }); 
     }; 
    </script> 
</head> 
<body> 
    <div name="div" class="border visible"></div> 
</body> 
</html>

источник

2015-06-27 volkans80

Чего вы хотите достичь? текущий код записывается, чтобы держать div скрытым после первого касания, любое другое касание будет скрывать его. Просьба указать, что вы хотите, когда его коснется, пока он скрыт. BTW, на jsFiddle, класс div class = "border visible", и вот его класс = "border hidden" –

Я хочу, чтобы div исчезал, когда touchstart и div исчезают при касании. – volkans80

Я обновил свой JsFiddle и протестировано на хромированном браузере моего телефона. он работает, как вы заявили в своем комментарии.

var div = document.getElementsByName('div')[0]; 
div.addEventListener('touchstart', function (e) {  
    div.className = 'border visible'; 
    e.preventDefault(); 
    return false; 
}); 
div.addEventListener('touchend', function(e){ 
    div.className = 'border hidden'; 
    e.preventDefault(); 
    return false; 
});

источник

2015-06-28 09:35:02

Благодарим вас за ответ, но он не стабилен. Если я попробую его с эмулятором на рабочем столе Chrome, он работает только один раз, а затем открывает меню с правом выбора. Если я попробую его на Android, вы также откроете меню вырезания скопированной копии. – volkans80

Взгляните на этот вопрос, это может вам помочь: http://stackoverflow.com/questions/3413683/disabling-the-context-menu-on-long-taps-on-android –

Хорошо, я тестировал его снова , Если причина нажатия правой кнопки мыши длиннее, то я изменил сценарий. Попробуй это. Коснитесь экрана и переместите палец на div. Это меню правой кнопки мыши не отображается, но проблема по-прежнему продолжается. Когда opacity достигает 0, то это больше не работает. – volkans80

Использование перехода с касанием событиями касания в Chrome

ответ

Смежные вопросы