If there are three divs div1,div2,div3 side by side. If I do mousedown on div1 and then if I move mouse onto div2 then div2 mousemove will be fired with the target as div2. But in mobile if do same even mousedown(touchstart) on div1 and move the mouse onto div2 then mousemove(touchmove) is firing with target as div1 itself. I need mobile touchmove event target as div2?
Why there is a difference in behavior and what we can do?
Below is the sample I have did to explain my issue,
var testString = '';
handleMouseMoveListener = (e) => {
//console.log(e.target.id);
e.preventDefault();
e.stopPropagation();
this.testString = this.testString + '' + e.target.id;
}
handleMouseUpHandler = (e) => {
alert(this.testString);
this.testString = '';
}
let elementsArray = document.querySelectorAll("div");
elementsArray.forEach(function (elem) {
elem.addEventListener('mousemove', this.handleMouseMoveListener);
elem.addEventListener('touchmove', this.handleMouseMoveListener);
elem.addEventListener('mouseup', this.handleMouseUpHandler);
elem.addEventListener('touchend', this.handleMouseUpHandler);
});<!DOCTYPE html><html><head><title>Page Title</title><style>
div {
display: inline-block;
width: 150px;
height: 150px;
color: red;
border: 1px solid black;
}</style></head><body><div id='div1'>div1</div><div id='div2'>div2</div><div id='div3'>div3</div></body></html>