CODEWITHSUNDEEP
javascriptjquerygoogle-chromeeventstouch
Akbar Basha
Akbar Basha

Reputation: 1198

Touch end event not working properly in chrome

here is my code,

<body>
    <div id="first" style="background-color:red;height:90px;width:200px;">

    </div>
    <div id="second" style="background-color:blue;height:90px;width:200px;">

    </div>
    <script>
        var ele1 = document.getElementById("first"), ele2 = document.getElementById("second");

        $("#first").css('touch-action', 'none');
        $("#second").css('touch-action', 'none');

        $(ele1).bind("touchend mouseup", function (e) {
           alert("red");
        });
        $(ele2).bind("touchend mouseup", function (e) {
            alert("blue");
        })
    </script>
</body>

if i have click(using mouse) the red element and drag to the blue element it thrown the alert box as blue .... it's working fine. in this case the mouseup event is triggered from blue which it was correct

But when i have touch the red and drag to the blue element it thrown the alert box as red....in this case the touchend event is triggered from the red element... how to resolve it? this was reproduced in chrome browser.

Demo Sample : http://jsfiddle.net/ZPUr4/436/

Upvotes: 0

Views: 2288

Answers (1)

Vinay Dhakre
Vinay Dhakre

Reputation: 61

As per documentation:

"The event's target is the same element that received the touchstart event corresponding to the touch point, even if the touch point has moved outside that element."

You can see the documentation of touchend also:

https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent

It means, if you touch the red box and drag to the blue box then red box event will be triggered. To avoid conflicting scroll and touch events at the same time, this type of functionality is maintained.

Upvotes: 2

Related Questions