保藏本站 保藏本站
真钱棋牌网主页 - 软件测验 - 常用手册 - 站长东西 - 技能社区
主页 > CSS/HTML > 正文

主页 - PHP - 数据库 - 操作体系 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS指令 - jQuery - CSS款式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

HTML5实战与剖析之接触事情(touchstart、touchmove和touchend)

  HTML5中新增加了许多事情,可是由于他们的兼容问题不是很抱负,运用实战性不是太强,所以在这儿根本省掉,我们只共享运用广泛兼容不错的事情,日后跟着兼容状况提高今后再接连增加共享。今日为我们介绍的事情主要是接触事情:touchstart、touchmove和touchend。

  一开始接触事情touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息新增加的事情。由于iOs设备既没有鼠标也没有键盘,所以在为移动Safari浏览器开发交互性网页的时分,PC端的鼠标和键盘事情是不够用的。

  在iPhone 3Gs发布的时分,其自带的移动Safari浏览器就供给了一些与接触(touch)操作相关的新事情。随后,Android上的浏览器也完成了相同的事情。接触事情(touch)会在用户手指放在屏幕上面的时分、在屏幕上滑动的时分或者是从屏幕上移开的时分动身。下面具体阐明:

  touchstart事情:当手指接触屏幕时分触发,即便已经有一个手指放在屏幕上也会触发。
  touchmove事情:当手指在屏幕上滑动的时分接连地触发。在这个事情发作期间,调用preventDefault()事情能够阻挠翻滚。
  touchend事情:当手指从屏幕上脱离的时分触发。
  touchcancel事情:当体系中止盯梢接触的时分触发。关于这个事情的切当动身时刻,文档中并没有具体阐明,我们只能去猜想了。

  上面的这些事情都会冒泡,也都能够撤销。尽管这些接触事情没有在DOM标准中界说,可是它们却是以兼容DOM的办法完成的。所以,每个接触事情的event方针都供给了在鼠标实践中常见的特点:bubbles(起泡事情的类型)、cancelable(是否用 preventDefault() 办法能够撤销与事情相关的默许动作)、clientX(回来当事情被触发时,鼠标指针的水平坐标)、clientY(回来当事情触发时,鼠标指针的笔直坐标)、screenX(当某个事情被触发时,鼠标指针的水平坐标)和screenY(回来当某个事情被触发时,鼠标指针的笔直坐标)。除了常见的DOM特点,接触事情还包含下面三个用于盯梢接触的特点。

  touches:表明当时盯梢的接触操作的touch方针的数组。
  targetTouches:特定于事情方针的Touch方针的数组。
  changeTouches:表明自前次接触以来发作了什么改动的Touch方针的数组。

  每个Touch方针包含的特点如下。

  clientX:接触方针在视口中的x坐标。
  clientY:接触方针在视口中的y坐标。
  identifier:标识接触的仅有ID。
  pageX:接触方针在页面中的x坐标。
  pageY:接触方针在页面中的y坐标。
  screenX:接触方针在屏幕中的x坐标。
  screenY:接触方针在屏幕中的y坐标。
  target:触目的DOM节点方针。

上面的特点光这么看,公然十分繁琐,每个特点说的都是那么的详尽,只要真刀实枪的来点小比如才干愈加了解其间的微妙。所以小比如如下。

JavaScript代码

function load (){

 

    document.addEventListener('touchstart',touch,false);

    document.addEventListener('touchmove',touch,false);

    document.addEventListener('touchend',touch,false);

     

    function touch (event){

        var event = event || window.event;

         

        var oInp = document.getElementById("inp");

 

        switch(event.type){

            case "touchstart":

                oInp.innerHTML ="Touch started (" + event.touches[0].clientX +"," + event.touches[0].clientY +")";

                break;

            case "touchend":

                oInp.innerHTML ="<br>Touch end (" + event.changedTouches[0].clientX +"," + event.changedTouches[0].clientY +")";

                break;

            case "touchmove":

                event.preventDefault();

                oInp.innerHTML ="<br>Touch moved (" + event.touches[0].clientX +"," + event.touches[0].clientY +")";

                break;

        }

         

    }

}

window.addEventListener('load',load,false);

HTML代码

<div id="inp"></div>

  上面的小比如。当touchstart事情触发的时分,会将接触的方位更新到div标签中。当touchmove事情触发的时分,会默许行为的翻滚(接触移动的默许行为是翻滚页面),然后接触操作的改变信息更新到div标签中。而touchend事情会输出有关接触操作的终究信息。留意,在touchend事情触发的时分,touches调集中就没有任何Touch方针了,由于不存在活动的接触操作。

  这些事情会在文档的一切元素上面触发,因此能够别离操作页面的不同部分。在接触屏幕上的元素,这些事情(包含鼠标事情)发作的次序如下:

(1)touchstart
(2)mouseover
(3)mousemove(一次)
(4)mousedown
(5)mouseup
(6)click
(7)touchend

  介绍了这么多,这些接触事情的兼容状况怎样样呢?支撑接触事情(touchstart、touchmove和touchend)的浏览器有:iOs版Safari、Android版WebKit、bada版Dolfin、OS6+中的BlackBerry WebKit、Opera Mobile 10.1+和LG专有OS中的Phantom浏览器。现在只要iOs版Safari支撑多点接触。PC版Firefox 6+ 和Chrome也支撑接触事情。

  HTML5实战与剖析之接触事情(touchstart、touchmove和touchend)就为我们介绍到这儿了,今日主要为我们介绍了些浏览器兼容支撑的状况还不错的接触事情。期望能给我们一个参阅,也期望我们多多支撑真钱棋牌网。

学习小实例--翻滚条的简略完成
作用:代码:!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"htmlxmlns="http://www.w3.org/1999/xhtml"headmetahttp-equiv="Content-Ty

cookie处理微信不能存储localStorage的问题
在开发根据微信的Web页面时,发现有些机型不能存储信息到localStorage中,或者是页面一旦封闭,存储的信息也失效了。用cookie来代替localStorage,存储一

div的offsetLeft与style.left差异
clientX事情特点回来当事情被触发时鼠标指针向关于浏览器页面(或客户区)的水平坐标。客户区指的是当时窗口。假如父div的position界说为relative,子div

本周排行

更新排行

强悍的草根IT技能社区,这儿应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 ystekkfj.com. All Rights Rreserved  京ICP备05050695号