2017-8-31 2499 0
2017-6-28 2410 0
2017-6-23 2133 0
未分类

现在智能手机火爆了,我们都是触摸屏事的,那么我们以前js写法是无法满足一些要求了,下面我来给大家介绍几个JS手机触摸屏的事件用法处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件:一、touchstart://手指放到屏幕上的时候触发touchmove://手指在屏幕上移动的时候触发touchend://手指从屏幕上拿起的时候触发touchcancel://系统取消touch事件的时候触发。至于系统什么时候会取消,不详二、clientX/clientY://触摸点相对于浏览器窗口viewport的位置pageX/pageY://触摸点相对于页面的位置screenX/screenY://触摸点相对于屏幕的位置identifier:>//touch对象的uniqueID三,每个Touch对象包含下列属性。clientX:触摸目标在视口中的X坐标。clientY:触摸目标在视口中的Y坐标。identifier:表示触摸的唯一ID。pageX:触摸目标在页面中的x坐标。pageY:触摸目标在页面中的y坐标。screenX:触摸目标在屏幕中的x坐标。screenY:触摸目标在屏幕中的y坐标。target:触摸的DOM节点坐标。例代码如下复制代码<!doctypehtml><html><head><metacharset="utf-8"><title>touches</title><style>body{font-size:60px;color:red;}</style><script>functiontouches(ev){if(ev.touches.length==1){varoDiv=document.getElementById('div1');switch(ev.type){case'touchstart':oDiv.innerHTML='Touchstart('+ev.touches[0].clientX+','+ev.touches[0].clientY+')';ev.preventDefault();//阻止出现滚动条break;case'touchend':oDiv.innerHTML='Touchend('+ev.changedTouches[0].clientX+','+ev.changedTouches[0].clientY+')';break;case'touchmove':oDiv.innerHTML='Touchmove('+ev.changedTouches[0].clientX+','+ev.changedTouches[0].clientY+')';break;}}}document.addEventListener('touchstart',touches,false);document.addEventListener('touchend',touches,false);document.addEventListener('touchmove',touches,false);</script></head><body><divid="div1"></div></body></html>二、手势事件:gesturestart:当一个手指按在屏幕上,另一个手指有触发屏幕时,触发;gestureend:当你的任何一个手指从屏幕上移开的时候,触发;gesturechange:当触摸屏幕的任何一个手指发生变化的时候,触发;在事件对象这里,其他的都还一样,在手势这里多了两个很有用的东西:一个是rotation:手指变化引起的旋转角度,顺时针为正的,逆时针为负的;还有一个scale:两个手指之间的距离变化;例代码如下复制代码<!doctypehtml><html><head><metacharset="utf-8"><title>gesture</title><style>body{font-size:60px;color:red;}</style><script>window.onload=function(){functiongesture(ev){vardiv=document.getElementById('div1');switch(ev.type){case'gesturestart':div.innerHTML='Gesturestart(rotation='+ev.rotation+',scale='+ev.scale+')';ev.preventDefault();break;case'gestureend':div.innerHTML='GestureEnd(rotation='+ev.rotation+',scale='+ev.scale+')';break;case'gesturechange':div.innerHTML='GestureChange(rotation='+ev.rotation+',scale='+ev.scale+')';break;}}document.addEventListener('gesturestart',gesture,false);document.addEventListener('gestureend',gesture,false);document.addEventListener('gesturechange',gesture,false);}</script></head><body><divid="div1"></div></body></html>来自:http://blog.csdn.net/b7995547/article/details/48951761

源码

为了减少服务器连接数。或者是为了确保JS执行时,所依赖CSS文件已经下载完成。你是否想过要把CSS和JS写到一个文件里呢?今天学了一招,正好解决这个问题![原作者的BLOG:http://blogs.msdn.com/shivap/archive/2007/05/01/combine-css-with-js-and-make-it-into-a-single-download.aspx]这其实是利用了浏览器特性的一种HACK手法!作者说在IE和FF下能正常使用。我用opera9.02测试过了,可以正常运行。关键点:CSS和JS解析器在处理注释的区别1.CSS解析器在碰到“<!--”的时候会直接抛弃2.JS解析器在碰到“<!--”的时候,会把他当作"//"处理。也就是说把他当做行注释处理!看看下面这个代码片段:1<!--/*2functiontest(){alert("虽然使用性有待商榷。\n但想法值得称赞!");}3<!--*/4<!--body{background-color:#f00;}CSS解析时,它等价于下面这段代码1/*2functiontest(){alert("虽然使用性有待商榷。\n但想法值得称赞!");}3*/4body{background-color:#f00;}而JS解析时,他却等价于如下代码1///*----行注释2functiontest(){alert("虽然使用性有待商榷。\n但想法值得称赞!");}3//*/----行注释4//body{background-color:#f00;}----行注释问题是不是解决了呢?将这段代码,保存成1.jcs。[或其他任意文件名,引用的时候做对应修改就行了]然后,将下面代码保存成任意文件。和他放在同一目录下即可!1<linktype="text/css"rel="stylesheet"href="1.jcs"/>2<scripttype="text/javascript"language="javascript"src="1.jcs"></script>3<inputtype="button"value="点我一下,看包含的函数是否可以执行"onclick="test()"/>link和script标签虽然两次链接该文件。但是由于缓存的缘故,只会发一次请求!当然,代价是增加了约等于“4*css行数”的冗于代码。正常情况下,这个冗于在1K以内!来源:http://www.cnblogs.com/devweb/archive/2009/10/09/1579535.html