简体   繁体   中英

touch event not working on android

I built a spotlight style overlay that works fine on iphones/tablets/and pc but it's not working on android devices. here's what I'm working with:

    <script type="text/javascript">
var spot = document.getElementById('spot');
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;

/* A bit of JS to respond to mouse events */
function moveSpot(e){
    var x = 0;
    var y = 0;
    if (!e) var e = window.event;
    if (e.pageX || e.pageY)
    {
        x = e.pageX;
        y = e.pageY;
    }
    else if (e.clientX || e.clientY)
    {
        x = e.clientX + document.body.scrollLeft;
        y = e.clientY + document.body.scrollTop;
    }


    var style = '-webkit-gradient(radial, '+x+' '+y+', 0, '+x+' '+y+', 100, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)), color-stop(0.8, rgba(0,0,0,0)))';

    spot.style.backgroundImage = style;
}

window.onload = function() {
    //window.onmousemove = moveSpot;
    window.ontouchmove = moveSpot;
}
</script>

some direction as to the issue would be appreciated.

I figured it out. Essentially you need to change e.pageX and e.pageY to event.touches[0].pageX and event.touches[0].pageY also within the code call event.preventDefault(); this seemed to resolve the issue.

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM