使用图片touch事件模拟按钮点击效果&&图片预加载
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用图片touch事件模拟按钮点击效果&&图片预加载相关的知识，希望对你有一定的参考价值。
模拟按钮点击效果踩坑
1 先说移动端300ms延迟
关于300ms延迟这个网址：http://developer.telerik.com/featured/300-ms-click-delay-ios-8/有详细的说明于解决方案，在这里不再赘述，由于项目需求，我又测试了一下客户端touchstart touchend click三个事件的触发顺序测试代码如下：
<body> <div class="btn"> <img src="./img/pointer-normal.png"> </div> <div> <label>touchstart:</label> <span class="start"></span> </div> <div> <label>touchend:</label> <span class="end"></span> </div> <div> <label>click:</label> <span class="click"></span> </div> </body> <script type="text/javascript"> var btn = document.querySelector(‘.btn‘); var img = document.querySelector(‘img‘); var start = document.querySelector(‘.start‘); var end = document.querySelector(‘.end‘); var click = document.querySelector(‘.click‘); btn.ontouchstart = function(){ start.innerhtml = Date.now(); img.setAttribute(‘src‘,‘./img/pointer-click.png‘); } btn.ontouchend = function(){ end.innerHTML = Date.now(); img.setAttribute(‘src‘,‘./img/pointer-normal.png‘); } btn.onclick = function(){ click.innerHTML = Date.now(); }
测试结果 touchstart ： 1466823602 819
touchend：1466823602 876
click：1466823602 879
最新版的安卓机浏览器和最新版的iphone浏览器测试结果相差无几，touchend 和 click事件的触发时间 间隔很短 用户不能明显感知得到，但是为了兼容以前的版本 使用 click时 最好还是使用fastclick解决延迟时间。
2 模拟点击效果的过程中 我才采用切换图片来实现初始代码如上图，但是在测试的过程中发现有一大部分一定端浏览器并不能实现这个效果，于是便开始分析原因，在设置了图片src后，我将图片的src打印了出来，发现src是变了，但是图片没有切换成功，我觉得应该是图片加载的问题，于是我先预加载了图片，代码如下：
var preLoad = new Image();
preLoad.src=‘./img/pointer-click.png‘;
preLoad.onload = function(){
btn.ontouchstart = function(){
start.innerHTML = Date.now();
img.setAttribute(‘src‘,‘./img/pointer-click.png‘);
}
btn.ontouchend = function(){
end.innerHTML = Date.now();
img.setAttribute(‘src‘,‘./img/pointer-normal.png‘);
}
btn.onclick = function(){
click.innerHTML = Date.now();
}
}
之后测试了一下 果然 成功了。
以上是关于使用图片touch事件模拟按钮点击效果&&图片预加载的主要内容，如果未能解决你的问题，请参考以下文章