在 Chrome 中使用带有 touchend 的过渡块触摸事件答案

【问题标题】：Using transition with touchend blocks touch events in Chrome在 Chrome 中使用带有 touchend 的过渡块触摸事件
【发布时间】：2015-09-14 05:04:07
【问题描述】：

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

在这个fiddle 中，有一个简单的代码可以让 touchstart 淡入和 touchend 事件淡出。当您开始触摸时，一切正常。您可以移开手指并在 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>

【问题讨论】：

你想达到什么目的？当前代码被编写为在第一次触摸后保持 div 隐藏，任何其他触摸都会使其隐藏。请指定您希望在隐藏时触摸它时发生什么。顺便说一句，在 jsFiddle 上，div 类是 class="border visible"，这里是 class="border hidden"
我想在touchstart时div淡入，在touchend时div淡出。

标签： javascript google-chrome css-transitions touch-event

【解决方案1】：

我更新了您的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;
});

【讨论】：

感谢您的回答，但不稳定。如果我使用 Chrome 桌面设备模拟器尝试它，它只能工作一次，然后打开右 cick 菜单。如果我在 android 上尝试它也会打开剪切复制粘贴菜单。
看看这个问题，可能对你有帮助：stackoverflow.com/questions/3413683/…
好的，我又测试了一遍。如果右键菜单的原因是长按，那么我改变了场景。尝试这个。触摸屏并在 div 上移动手指。这样右键菜单不会出现，但问题仍然存在。当不透明度达到 0 时，它就不再起作用了。