Html5 ontouchstart与ontouchend

最新推荐文章于 2024-07-07 21:03:48 发布

Je_WangZhe

最新推荐文章于 2024-07-07 21:03:48 发布

阅读量1.5w

点赞数

分类专栏： Java Web 文章标签： html5 ontouchstart ontouchend

本文链接：https://blog.csdn.net/u010202304/article/details/46700717

版权

本文介绍了在移动端Web App开发中，如何利用HTML5的ontouchstart和ontouchend事件来实现类似PC端hover效果的功能。当手指触摸屏幕时，元素背景色改变，手指离开时恢复原色。通过这两个事件，解决了移动端无鼠标事件导致的交互难题。

摘要由CSDN通过智能技术生成

一开始做项目时，还是把项目(web app)当初PC端的项目来做，然后项目方面提出了一个需求说是手指触摸屏幕上的某条信息时，背景色需要切换成另外一种颜色，当手指离开时变回原来的颜色，我一想，这个好简单。。。搞个a标签用伪类hover就可以实现了，好吧，一开始想简单了，就这样弄上去了，运行项目，发现没有想要的效果。。。然后就各种检查(代码)，发现没问题之后，就开始着手是不是移动端的跟PC端的有什么区别没有，最后定位到：移动端是没有鼠标事件，换言之就是用上面的方式是行不通的，好吧那看看有没有解决的方法。

最后找到了ontouchstart与ontouchend这两个事件，问题解决，效果也实现了。实例代码如下：

<!DOCTYPE html>
<html> 
    <head> 
       <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
       <script type="text/javascript"> 
   	   window.onload = function() {
    		var friends = document.getElementsByClassName("friend");// 循环
    		for(var i = 0; i < friends.length; i