将transition与touchend一起使用会阻止Chrome中的触摸事件

Using transition with touchend blocks touch events in Chrome

本文关键字：Chrome 事件 触摸 transition touchend 一起      更新时间：2023-09-26

我想在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>

我更新了您的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;
});
相关文章：