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.