Fatal编程技术网
  • javascript/
  • Javascript 使用带有touchend的transition可在Chrome中阻止触摸事件

Javascript 使用带有touchend的transition可在Chrome中阻止触摸事件

javascript google-chrome

Javascript 使用带有touchend的transition可在Chrome中阻止触摸事件,javascript,google-chrome,css-transitions,touch-event,Javascript,Google Chrome,Css Transitions,Touch Event,我想在Chrome中对触摸事件使用淡入淡出效果，但触摸事件会阻塞 这里有一个简单的代码，用于淡入touchstart和淡出touchend事件。当触摸开始时，一切都正常。你可以移开手指，在1秒钟内再次触摸，你可以看到淡入淡出。但当时间正好达到1秒时，不透明度达到0，touchevents被阻止 这是错误还是编码问题 谢谢 <html> <head> <meta http-equiv="content-type" content="text/html; cha

我想在Chrome中对触摸事件使用淡入淡出效果，但触摸事件会阻塞

这里有一个简单的代码，用于淡入touchstart和淡出touchend事件。当触摸开始时，一切都正常。你可以移开手指，在1秒钟内再次触摸，你可以看到淡入淡出。但当时间正好达到1秒时，不透明度达到0，touchevents被阻止

这是错误还是编码问题

谢谢

<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>


.边界{
边框：1px纯红；
高度：300px；
}
.可见{
不透明度：1；
过渡：不透明度1s线性；
}
.隐藏{
不透明度：0；
过渡：不透明度1s线性；
}
window.onload=function（）{
var div=document.getElementsByName（'div'）[0]；
div.addEventListener（'touchstart'，函数（e）{
div.className='边框可见'；
});
div.addEventListener（'touchend'，函数（e）{
div.className='边框隐藏'；
});
};
我更新了您的浏览器，并在手机的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;
});
我更新了您的浏览器，并在手机的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;
});
你想要实现什么？编写当前代码是为了在第一次触摸后隐藏div，任何其他触摸都会将其隐藏。请指定在其隐藏时触摸其时希望发生什么。顺便说一句，在JSFIDLE上，div类是class=“border visible”，这里它的class=“border hidden”我想在touchstart时div淡入，在touchend时div淡出。你想实现什么？编写当前代码是为了在第一次触摸后隐藏div，任何其他触摸都会将其隐藏。请指定在其隐藏时触摸其时希望发生什么。顺便说一句，在JSFIDLE上，div类是class=“border visible”，这里它的class=“border hidden”我想在touchstart时div淡入，在touchend时div淡出。谢谢你的回答，但它并不稳定。如果我尝试使用Chrome桌面设备模拟器，它只工作一次，然后打开右边的cick菜单。如果我在安卓系统上尝试，也会打开剪切复制粘贴菜单。看看这个问题，它可能会帮助你：好的，我再次测试了它。如果右击菜单的原因是长点击，那么我改变了场景。试试这个。触摸屏并在div上移动手指。这样，右键单击菜单不会出现，但问题仍然存在。当不透明度达到0时，它将不再工作。感谢您的回答，但它不稳定。如果我尝试使用Chrome桌面设备模拟器，它只工作一次，然后打开右边的cick菜单。如果我在安卓系统上尝试，也会打开剪切复制粘贴菜单。看看这个问题，它可能会帮助你：好的，我再次测试了它。如果右击菜单的原因是长点击，那么我改变了场景。试试这个。触摸屏并在div上移动手指。这样，右键单击菜单不会出现，但问题仍然存在。当不透明度达到0时，它将不再工作。