1

I want to use fade effect with touch events in Chrome but touch events blocking.

In this fiddle there is simple code to fade in for touchstart and fade out for touchend events. When your touch starts everything is ok. You can remove your finger and touch again in 1 seconds and you can see fade in-out. But when time is reachs exactly 1 second then opacity reachs 0 and touchevents are blocked.

Is this a bug or coding problem?

Thanks,

<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>
volkans80
  • 23
  • 3
  • 1
    What do you want to achieve? the current code is written to keep the div hidden after the first touch, any other touch will keep it hidden. Please specify what do you want to happen when its touched while its hidden. BTW, on jsFiddle, the div class is class="border visible" and here its class="border hidden" – Sari Alalem Jun 27 '15 at 09:12
  • I want to div fade in when touchstart and div fade out when touchend. – volkans80 Jun 27 '15 at 13:16

1 Answers1

0

I updated your JsFiddle and tested on my phone's chrome browser. it works as you stated in your comment.

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;
});
Sari Alalem
  • 870
  • 7
  • 18
  • Thank you for your answer but it is not stable. If I try it with Chrome desktop device emulator it is working only one time and then opens right cick menu. If I try it on android also opens cut copy paste menu. – volkans80 Jun 28 '15 at 14:48
  • Take a look at this question, it might help you: http://stackoverflow.com/questions/3413683/disabling-the-context-menu-on-long-taps-on-android – Sari Alalem Jun 29 '15 at 07:01
  • Ok, I tested it again. If the reason of right click menu is long tap then I changed scenario. Try this. Touch screen and move your finger on div. This way right click menu not appear but problem is still continue. When opacity reachs 0 then it is not work anymore. – volkans80 Jun 30 '15 at 11:56