在Chrome中使用觸控塊觸摸事件的轉換

我想在Chrome中使用觸控事件的淡入效果，但觸摸事件阻止。在Chrome中使用觸控塊觸摸事件的轉換

在這個fiddle中，有一個簡單的代碼可以淡入淡出touchstart和淡出touchend事件。當你的觸摸開始時，一切都很好。您可以移除手指並在1秒內再次觸摸，並可以看到淡入淡出。但是當時間剛好達到1秒，那麼不透明度達到0，並且touchevent被阻止。

這是一個錯誤或編碼問題？

感謝，

<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而編寫的，任何其他的觸摸都會隱藏它。請指定當其隱藏時觸摸它時想要發生什麼。順便說一句，在jsFiddle，div類是class =「border visible」，這裏它的class =「border hidden」 –

當touchstart和div淡入淡出時，我想div淡入。 – volkans80

我更新了JsFiddle和我手機的Chrome瀏覽器測試。它的工作原理與您在評論中所述的一樣。

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上移動手指。這種方式右鍵菜單不會出現，但問題仍然存在。當不透明度達到0時，它不再起作用。 – volkans80

在Chrome中使用觸控塊觸摸事件的轉換

回答

相關問題