用于web页面的触摸事件模型

摘要

本发明涉及用于web页面的触摸事件模型。可以从触摸敏感设备中获取一个或多个触摸输入信号。根据这些触摸输入信号，可以使用触摸事件模型来确定触摸和/或手势事件。这些触摸和手势事件可以与那些从触摸敏感设备上显示的web页面的不同区域产生的触摸输入信号相关联。通过编程接口，可以提供对至少一个触摸或手势事件的访问。

权利要求

1.一种方法，包括：

获取来自触摸敏感设备的一个或多个触摸输入信号；

基于所述触摸输入信号确定两个或更多个触摸事件，其中所述触摸事件与和在触摸敏感设备上显示的web页面的两个或更多个区域相关联的触摸输入信号相关联；以及通过编程接口提供对至少一个触摸事件的访问。

2.根据权利要求1所述的方法，其中所述触摸事件来自于由触摸开始事件、触摸移动事件、触摸结束事件和触摸取消事件组成的一组触摸事件。

3.根据权利要求1所述的方法，其中一系列触摸事件被确定为包括开始触摸事件、一个或多个触摸移动事件以及触摸结束或者触摸取消事件。

4.根据权利要求1所述的方法，其中两个或更多个触摸事件被确定为触摸手势。

5.根据权利要求1所述的方法，其中所述触摸事件基本同时发生。

6.根据权利要求1所述的方法，其中所述web页面区域与文档对象模型DOM中的节点相关联，并且所述节点位于该DOM的相同或不同层级上。

7.根据权利要求1所述的方法，其中对触摸事件的访问与能被插入文档以在应用中定义事件动作的属性相关联。

8.根据权利要求7所述的方法，其中所述应用是浏览器。

9.根据权利要求7所述的方法，其中所述事件动作包括运行JavaScript。

10.根据权利要求7所述的方法，其中所述属性被插入HTML文档中的一个或多个HTML标签内，用以生成在触摸敏感设备上显示的web页面。

11.根据权利要求1所述的方法，其中每个触摸事件与单个触摸输入信号相关联。

12.根据权利要求11所述的方法，其中响应于由单个手指触摸该触摸敏感设备生成的触摸输入，生成每个触摸输入信号。

13.一种方法，包括：

获取来自触摸敏感设备的一个或多个触摸输入信号；

基于所述触摸输入信号确定两个或更多个触摸事件，其中所述触摸事件与和在触摸敏感设备上显示的web页面的两个或更多个区域相关联的触摸输入信号相关联；以及将所述两个或更多个触摸事件发送至所述web页面以供处理。

14.根据权利要求13所述的方法，其中所述触摸事件来自于由触摸开始事件、触摸移动事件、触摸结束事件和触摸取消事件组成的一组触摸事件。

15.根据权利要求13所述的方法，其中一系列触摸事件被确定为包括开始触摸事件、一个或多个触摸移动事件以及触摸结束或者触摸取消事件。

16.根据权利要求13所述的方法，其中两个或更多个触摸事件被确定为触摸手势。

17.根据权利要求13所述的方法，其中所述触摸事件基本同时发生。

18.根据权利要求13所述的方法，其中所述web页面区域与文档对象模型DOM中的节点相关联，并且所述节点位于该DOM的相同或不同层级上。

19.根据权利要求13所述的方法，其中所述触摸事件与能被插入文档以在应用中定义事件动作的属性相关联。

20.一种系统，包括：

处理器；

耦合至该处理器并在其上存储有指令的计算机可读介质，所述指令在由处理器执行时，使处理器执行包括如下的操作：获取来自触摸敏感设备的一个或多个触摸输入信号；

基于所述触摸输入信号确定两个或更多个触摸事件，其中所述触摸事件与和在触摸敏感设备上显示的web页面的两个或更多个区域相关联的触摸输入信号相关联；以及通过编程接口提供对至少一个触摸事件的访问。

21.根据权利要求20所述的系统，其中所述触摸事件来自于由触摸开始事件、触摸移动事件、触摸结束事件和触摸取消事件组成的一组触摸事件。

22.根据权利要求21所述的系统，其中一系列触摸事件被确定为包括开始触摸事件、一个或多个触摸移动事件以及触摸结束或者触摸取消事件。

23.根据权利要求21所述的系统，其中两个或更多个触摸事件被确定为触摸手势。

24.根据权利要求21所述的系统，其中所述触摸事件基本同时发生。

25.一种系统，包括：

处理器；

耦合至该处理器并在其上存储有指令的计算机可读介质，所述指令在由处理器执行时，使处理器执行包括如下的操作：获取来自触摸敏感设备的一个或多个触摸输入信号；

基于所述触摸输入信号确定两个或更多个触摸事件，其中所述触摸事件与和在触摸敏感设备上显示的web页面的两个或更多个区域相关联的触摸输入信号相关联；以及将所述两个或更多个触摸事件发送至所述web页面以供处理。

26.根据权利要求25所述的系统，其中所述触摸事件来自于由触摸开始事件、触摸移动事件、触摸结束事件和触摸取消事件组成的一组触摸事件。

27.根据权利要求26所述的系统，其中一系列触摸事件被确定为包括开始触摸事件、一个或多个触摸移动事件以及触摸结束或者触摸取消事件。

28.一种系统，包括：

用于获取来自触摸敏感设备的一个或多个触摸输入信号的装置；

用于基于所述触摸输入信号确定两个或更多个触摸事件的装置，其中所述触摸事件与和在触摸敏感设备上显示的web页面的两个或更多个区域相关联的触摸输入信号相关联；以及用于通过编程接口提供对至少一个触摸事件的访问的装置。

29.一种其上存储有指令的计算机可读介质，所述指令在由处理器执行时，使处理器执行包括如下的操作：获取来自触摸敏感设备的一个或多个触摸输入信号；

基于所述触摸输入信号确定两个或更多个触摸事件，其中所述触摸事件与和在触摸敏感设备上显示的web页面的两个或更多个区域相关联的触摸输入信号相关联；以及通过编程接口提供对至少一个触摸事件的访问。

说明书

技术领域

本主题主要涉及web浏览(web browsing，网页浏览)服务。

背景技术

web页面(web page，网页)是用标记语言创建的，该标记语言提供了这样一种手段，即用于描述文档中基于文本的信息的结构并为该文本增补交互表单、嵌入图像及其他对象。一种流行的标记语言是超文本标记语言(HTML)，该语言是用被尖括号(angle bracket)包围的标记的形式编写的。HTML可以描述web页面的外观和语义，并且可以包括嵌入式脚本语言代码(例如)，该代码可以影响web浏览器及其他HTML处理器的行为。为开发人员提供了在web页面中添加鼠标事件处理机(handler)或事件监听器(listener)的能力。这些鼠标事件处理机可以被指定到web页面中的特定区域，并且可以被配置成接收这些区域中的鼠标事件，例如鼠标释放(mouse up)事件或鼠标按下(mouse down)事件。
相比之下，对使用触摸敏感设备导航的web页面来说，这些web页面通常需要对由用户使用一个或多个手指触摸web页面以及做出手势所产生的触摸事件做出响应。常规的鼠标事件处理机不能正确解释这些触摸事件。由此，这些触摸事件需要一种不同的触摸事件模型来正确解释触摸事件并且允许开发人员充分利用触摸敏感显示器或设备的能力。

发明内容

可以从触摸敏感设备中获取一个或多个触摸输入信号。根据这些触摸输入信号，可以使用触摸事件模型来确定触摸和/或手势事件。这些触摸和/或手势事件可以与那些从触摸敏感设备上显示的web页面的不同区域产生的触摸输入信号相关联。通过编程接口，可以提供对至少一个触摸或手势事件的访问。
在某些实施方式中，一种方法包括：获取来自触摸敏感设备的一个或多个触摸输入信号，基于触摸输入信号确定两个或多个触摸事件，其中该触摸事件与和在触摸敏感设备上显示的web页面中的两个或更多个区域相关联的触摸输入信号相关联，以及通过编程接口提供对至少一个触摸事件的访问。
在其他实施方式中，一种方法包括：获取来自触摸敏感设备的一个或多个触摸输入信号，基于触摸输入信号确定两个或多个触摸事件，其中该触摸事件与和在触摸显示设备上显示的web页面中的两个或多个区域相关联的触摸输入信号相关联，以及将两个或多个触摸事件发送至web页面以供处理。
在这里还公开了涉及系统、方法和计算机可读介质的其他实施方式。

附图说明

图1示出的是例示web页面文档。
图2示出的是例示的具有多点触摸能力的设备的处理堆栈。
图3是用于处理触摸事件的例示处理的流程图。
图4示出的是例示的具有多点触摸能力的设备。
图5是用于图4中具有多点触摸能力的设备的例示网络操作环境的框图。
图6是图4中具有多点触摸能力的设备的例示实施方式的框图。

具体实施方式

例示的web页面结构和DOM
图1A显示的是可以在浏览器上显示的例示web页面100。该浏览器可以主存在便携式设备上，诸如图4中具有多点触摸能力的设备400上。在web页面100上可以显示一个或多个单元，即单元102(“单元1”)、单元104(“单元2”)以及单元106(“单元3”)。这些单元102、104、106可以与用户可选的web页面100中的各区域相对应，并且在这里还可以提供附加功能作为选择结果。举例来说，这些单元可以对应于web页面100上的按钮。此外，这些单元还可以嵌套，以使一个单元包含另一个单元。例如，单元104包含了单元108。在所显示的示例中，举例来说，单元108是一个嵌套在单元104内部的擦除器控制(scrubber control)，而单元104则例如可以是媒体播放器的用户界面。
在某些实施方式中，用户可以使用手指而不是鼠标以结合web页面100上的单元执行各种功能。例如，用户可以使用图4所示的触摸敏感显示器402来触摸web页面100的单元。在一个示例中，用户可以通过用一个或多个手指触摸该单元和/或通过做出像轻扫(swipe)、合拢(pinch)或旋转(rotate)运动之类的手势来选择某个单元。为了识别触摸输入信号，web页面100的某些区域可以与触摸事件处理机相关联。如将要参考图1B所描述的那样，这种处理可以用DOM以及嵌入式脚本语言来实现。
图1B是与web页面100相关联的例示性DOM  150。DOM 150提供了web页面100的结构表示，并且将web页面内容描述成是一组可以被脚本语言(例如)解释的对象。在某些实施方式中，DOM 150通过将web页面100中的单元102、104、106、108映射到树的各独立节点来提供对web页面结构的访问。例如，单元102对应于节点154。单元104对应于节点156。单元106对应于节点158。单元108对应于节点160。根节点152对应于整个web页面100。
在某些实施方式中，通过将DOM 150中的相应节点与触摸事件处理机相关联，可以将web页面100中的一个或多个单元102、104、106、108与一个或多个相应的触摸事件处理机相关联。触摸事件处理机可以被插入到web页面100的HTML标签中，并且该触摸事件处理机可以在例如用户在web页面100上的某个单元内部进行触摸或做出手势时运行脚本语言来执行动作。举例来说，可以与DOM 150一起工作，以便将动作附着于不同的触摸事件。
在某些实施方式中，一个或多个单元102、104、106、108可以接收由事件处理机或监听器检测到的触摸输入。如参考图2所描述的那样，该触摸输入可以由触摸事件模型检测并处理成触摸事件，其中该触摸事件模型可以在软件堆栈的一个或多个层中实施。触摸事件可以由web页面100进一步处理。触摸事件可以采用与触摸敏感设备产生的原始触摸输入信号相比更易于在应用中使用的格式(例如属性)。举例来说，每一个触摸事件都可以包括一组当前正在发生的触摸所在的坐标。
web页面100中的每一个单元及其关联事件处理机都可以接收、处理和操作触摸事件。举个例子，如果驱动器202(图2)感测到与单元102相关联的触摸点110或是与单元104相关联的触摸点112，那么与单元102或104相关联的事件处理机就可以接收指示该单元已被触摸的独立的触摸事件，并且可以可选地将触摸事件发送到web页面100以供进一步处理。在某些实施方式中，如果被触摸的web页面100的区域不与事件处理机相对应，那么所述输入可由应用层214中的浏览器处理，而非web页面100来处理。
在某些实施方式中，在DOM 150中可以逐手指逐节点地检测触摸事件。例如，用户可在基本上相同的时间在触摸点110和触摸点112处触摸该触摸敏感显示器402，并且触摸事件模型可以检测到两个独立的触摸事件。由于DOM 150中的每一个节点102和104都与独立的触摸事件处理机相关联，因此，可以为触摸点110和触摸点112检测到独立触摸事件。
在某些实施方式中，触摸事件可以作为EventTarget(事件目标)而被递送到web页面100。触摸事件的某些示例可以包括触摸开始(touchstart)，触摸移动(touchmove)，触摸结束(touchend)以及触摸取消(touchcancel)。此外，其他触摸事件也是可能的。触摸开始是当用户首次将手指放在触摸敏感显示器402上且位于web页面100中与事件处理机相关联的一区域内时检测到的触摸事件。当用户在web页面100上四处移动其手指时，则可以检测到一个或多个触摸移动事件。当用户将其手指抬离web页面100时，则会检测到触摸结束事件。当系统中断常规事件处理时，则可检测到触摸取消。例如，触摸取消事件可以在为防止无意触摸而锁定触摸敏感显示器402时发生。
在某些实施方式中，手势事件还可以通过组合两个或多个触摸事件而被检测。与触摸事件相似，手势事件(GestureEvent)同样可以作为事件目标(EventTarget)而被递送到web页面100。手势事件的某些示例可以是手势开始(gesturestart)，手势改变(gesturechange)和手势结束(gestureend)。手势事件可以包括缩放和/或旋转信息。旋转信息可以包括旋转值，该旋转值是一个以度数为单位的相对增量。web页面100上的单元可以根据该旋转值而被动态旋转。缩放信息可以包括一个缩放值，该缩放值是以文档像素为单位的相对增量。对与手势事件相关联的web页面100上的单元来说，其大小可以根据该缩放值而被动态调整。此外，其他手势事件也是可能的。
在某些实施方式中，可以接收一个包含了用于标识web页面100上的一个或多个触摸的触摸事件数据的触摸列表。触摸事件数据可以包括触摸标识符以及至少一组触摸位置坐标。此外，该触摸列表还可以包括涉及与每一个触摸相关联的触摸事件目标的触摸事件数据。在某些实施方式中，这样一个触摸位置坐标组可以包括客户机坐标、页面坐标和屏幕坐标。在某些实施方式中，触摸事件数据可以标识一个或多个有改变的触摸。
在某些实施方式中，GestureEvent可以在TouchEvent之前被发送到web页面100。举个例子，如果用户将手指放在触摸点110和触摸点112上，然后使用这些手指在触摸敏感显示器上做出顺时针或逆时针旋转手势，那么触摸事件模型将会检测到这些多个触摸事件，并且会将这些触摸事件组合成一个手势事件。然后，该手势事件可以被发送到web页面100，其后跟随的是经组合形成该手势事件的各触摸事件。这样一来，开发人员可以访问手势事件以及该手势事件中的各个单独的触摸事件，由此就能在开发web应用时，为开发人员提供更大的灵活性。
在某些实施方式中，触摸事件是依照如下顺序接收的：触摸开始事件、一个或多个触摸移动事件、以及触摸结束或触摸取消事件。通过使用图1A的示例，当用户接触触摸点110时，与单元102相关联的第一触摸事件处理机将会检测到第一触摸开始事件。当用户接触触摸点112时，与单元104相关联的第二触摸事件处理机将会检测到第二触摸开始事件。当用户旋转其手指而没有抬起其手指时，第一和第二触摸事件处理机将会检测到触摸移动事件，并且该触摸移动事件可以被触摸事件模型解释成是旋转手势事件。当用户结束旋转并且将其手指抬离web页面100时，第一和第二触摸事件处理机将会检测到触摸结束事件。所有或某些触摸事件可以通过触摸事件应用编程接口(API)而对开发人员可用。触摸API可以作为软件开发工具包(SDK)或是作为应用的一部分(例如作为浏览器工具包的一部分)而对开发人员可用。该触摸事件API可以依靠其他服务、框架和操作系统来执行其各种功能。如参考图2所述，在触摸事件与那些可以插入文档用以在应用中定义事件动作的属性相关联的情况下，这些服务、框架和操作系统可以是软件或处理堆栈的一部分。
例示的IDL
现在将用接口描述语言(IDL)描述例示的触摸事件模型。IDL的功能和数据结构可以由web设计人员或应用开发人员通过API来访问。对触摸事件和/或手势事件的访问可以与那些可插入标记语言文档(例如HTML，XML)用以在应用中定义事件动作的属性相关联。例如，这些属性可以插入到HTML文档的一个或多个HTML标签中，用以产生在触摸敏感显示器402上显示的web页面。该事件动作可以包括运行一个嵌入式脚本(例如)。
interface[
  Conditional＝TOUCH_EVENTS，
  GenerateConstructor
]TouchEvent:UIEvent{
  void initTouchEvent(in AtomicString type，
            in boolean canBubble，
            in boolean cancelable，
            in DOMWindow view，
            in long detail，
            in long screenX，
            in long screenY，
            in long clientX，
            in long clientY，
            in boolean ctrlKey，
            in boolean altKey，
            in boolean shiftKey，
            in boolean metaKey，
            in TouchList touches，
            in TouchList targetTouches，
            in TouchList changedTouches，
            in long scale，
            in long rotation)；
  readonly attribute TouchList touches；//所有触摸
  readonly attribute TouchList targetTouches；//该TouchEvent Target(触摸事件目标)中的所有触摸
  readonly attribute TouchList changedTouches；//当前事件中有改变的所有触摸
  readonly attribute long scale；
  readonly attribute long rotation；
  readonly attribute boolean ctrlKey；
  readonly attribute boolean shiftKey；
  readonly attribute boolean altKey；
  readonly attribute boolean metaKey；
}；
interface[
  Conditional＝TOUCH_EVENTS，
]Touch{
  readonly attribute EventTarget target；
  readonly attribute long identifier；
  readonly attribute long clientX；
  readonly attribute long clientY；
  readonly attribute long pageX；
  readonly attribute long pageY；
  readonly attribute long screenX；
  readonly attribute long screenY；
}；
interface[
  Conditional＝TOUCH_EVENTS，
  HasIndexGetter，
]TouchList{
  readonly attribute unsigned long length；
  Touch    item(in unsigned long index)；
}；
interface[
  Conditional＝TOUCH_EVENTS，
  GenerateConstructor
]GestureEvent:UIEvent{
void initGestureEvent(in AtomicString type，
            in boolean canBubble，
            in boolean cancelable，
            in DOMWindow view，
            in long detail，
            in long screenX，
            in long screenY，
            in long clientX，
            in long clientY，
            in boolean ctrlKey，
            in boolean altKey，
            in boolean shiftKey，
            in boolean metaKey，
            in EventTarget target，
                  in long scale，
                  in long rotation)；
  readonly attribute EventTarget target；
  readonly attribute long scale；
  readonly attribute long rotation；
  readonly attribute boolean ctrlKey；
  readonly attribute boolean shiftKey；
  readonly attribute boolean altKey；
  readonly attribute boolean metaKey；
}；
In Document.idl:
Touch         createTouch(in EventTarget target，
                  in long identifier，
                  in long clientX，
                  in long clientY，
                  in long pageX，
                  in long pageY，
                  in long screenX，
                  in long screenY)
  raises(DOMException)；
[Custom]TouchList    createTouchList()
  raises(DOMException)；
以下是通过使用如上的例示IDL来处理触摸事件的HTML代码片段的示例。举例来说，以下HTML显示的是用HTML代码添加到单元中的触摸事件监听器TouchStart和GestureStart：
this.element.addEventListener(′touchstart′，function(e){return self.onTouchStart(e)}，false)；
this.element.addEventListener(′gesturestart′，function(e){return self.onGestureStart(e)}，false)；
与以上IDL相对应的HTML代码可以如下：
<！DOCTYPE html PUBLIC″-//W3C//DTD HTML 4.01 Transitional//EN″
″http://www.w3.org/TR/html4/loose.dtd″>


  
    
    
    
      .box{
        position:absolute；
        height:150px；
        width:150px；
        background-color:blue；
      }
      .box:active{
        background-color:red；
      }
      body{
        margin:0px；
      }
      #container{
        position:absolute；
        width:100％；
        height:100％；
      }
      #main-box2{
        top:10px；
        left:155px；
        background:red；
        z-index:1；
      }
    
    
      var trackedObjectCount＝0；
      function Box(inElement)
      {
        var self＝this；
        this.element＝inElement；
        this.scale＝1.0；
        this.rotation＝0；
        this.position＝′0，0′；
        this.element.addEventListener(′touchstart′，function(e){return self.onTouchStart(e)}，false)；
        this.element.addEventListener(′gesturestart′，function(e){return self.onGestureStart(e)}，false)；
      }
Box.prototype＝{
  //位置串是无单位的“x，y”
  get position()
  {
    return this._position；
  }，
  set position(pos)
  {
    this._position＝pos；
    var components＝pos.split(′，′)
    var x＝components[0]；
    var y＝components[1]；
    const kUseTransform＝true；
    if(kUseTransform){
      this.element.style.webkitTransform＝′rotate(′+this.rotation+′deg)scale(′+this.scale+′)
translate(′+x+′px，′+y+′px)′；
    }
    else{
      this.element.style.left＝x+′px′；
      this.element.style.top＝y+′px′；
    }
  }，
  getx()
  {
    return parseInt(this._position.split(′，′)[0])；
  }，
  set x(inX)
  {
    var comps＝this._position.split(′，′)；
    comps[0]＝inX；
    this.position＝comps.join(′，′)；
  }，
  gety()
  {
    return parseInt(this._position.split(′，′)[1])；
  }，
  set y(inY)
  {
    var comps＝this._position.split(′，′)；
    comps[1]＝inY；
    this.position＝comps.join(′，′)；
  }，
  filterEvent:function(e)
  {
  //防止浏览器执行其默认事件(滚动，缩放)
  e.preventDefault()；
  //在文档级添加事件监听器，由此接收关于其他单元
    的手势改变事件
  return(e.target＝＝this.element)；
}，
onTouchStart:function(e)
{
  if(！this.filterEvent(e))
    return false；
  //当第一手指落至这一单元时开始追踪
  if(e.targetTouches.length！＝1)
    return false；
  this.startX＝e.targetTouches[0].clientX；
  this.startY＝e.targetTouches[0].clientY；
  var self＝this；
  if(！(″touchMoveHandler″in this)){
    this.touchMoveHandler＝function(e){return self.onTouchMove(e)}
    this.touchEndHandler＝function(e){return self.onTouchEnd(e)}
  }
  document.addEventListener(′touchmove′，this.touchMoveHandler，false)；
  document.addEventListener(′touchend′，this.touchEndHandler，false)；
  trackedObjectCount++；
  return false；
}，
onTouchMove:function(e)
{
  if(！this.filterEvent(e))
    return false；
//当在这一单元上落有多个触摸时(这是一个手势)不追踪运动
if(e.targetTouches.length！＝1)
  return false；
var leftDelta＝e.targetTouches[0].clientX-this.startX；
var topDelta＝e.targetTouches[0].clientY-this.startY；
var newLeft＝(this.x)+leftDelta；
var newTop＝(this.y)+topDelta；
this.position＝newLeft+′，′+newTop；
this.startX＝e.targetTouches[0].clientX；
  this.startY＝e.targetTouches[0].clientY；
  return false；
}，
onTouchEnd:function(e)
{
  if(！this.filterEvent(e))
    return false；
  //当最后一根手指从这一单元上移开时，停止追踪
  if(e.targetTouches.length＞0)
    return false；
  document.removeEventListener(′touchmove′，this.touchMoveHandler，false)；
  document.removeEventListener(′touchend′，this.touchEndHandler，false)；
  trackedObjectCount--；
  return false；
}，
onGestureStart:function(e)
{
  if(！this.filterEvent(e))
    return false；
  var self＝this；
  if(！(″gestureChangeHandler″in this)){
    this.gestureChangeHandler＝function(e){return self.onGestureChange(e)}
    this.gestureEndHandler＝function(e){return self.onGestureEnd(e)}
  }
  document.addEventListener(′gesturechange′，this.gestureChangeHandler，true)；
  document.addEventListener(′gestureend′，this.gestureEndHandler，true)；
  return false；
}，
onGestureChange:function(e)
{
  if(！this.filterEvent(e))
    return false；
  //在追踪一个对象时，只解释手势。否则，解释原始触摸事件
  //移动所追踪的对象
  if(trackedObjectCount＝＝1){
    this.scale+＝e.scaling＊0.01；
    this.rotation+＝e.rotation/2；
    this.position＝this.position；
  }
            return false；
          }，
          onGestureEnd:function(e)
          {
            if(！this.filterEvent(e))
              return false；
            document.removeEventListener(′gesturechange′，this.gestureChangeHandler，true)；
            document.removeEventListener(′gestureend′，this.gestureEndHandler，true)；
            return false；
          }，
        }
        function loaded()
        {
          new Box(document.getElementById(′main-box′))；
          new Box(document.getElementById(′main-box2′))；
        }
        window.addEventListener(′load′，loaded，true)；