Touch end event not working properly in chrome
Question
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/
1 answers
solution1
1 2016-09-01 11:22:50
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.