CN108536361A - 触控操作的处理方法、装置、存储介质、处理器及终端 - Google Patents

触控操作的处理方法、装置、存储介质、处理器及终端 Download PDF

Info

Publication number
CN108536361A
CN108536361A CN201810288169.XA CN201810288169A CN108536361A CN 108536361 A CN108536361 A CN 108536361A CN 201810288169 A CN201810288169 A CN 201810288169A CN 108536361 A CN108536361 A CN 108536361A
Authority
CN
China
Prior art keywords
height
event
screen
touch object
current touch
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN201810288169.XA
Other languages
English (en)
Other versions
CN108536361B (zh
Inventor
余浩坚
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Netease Hangzhou Network Co Ltd
Original Assignee
Netease Hangzhou Network Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Netease Hangzhou Network Co Ltd filed Critical Netease Hangzhou Network Co Ltd
Priority to CN201810288169.XA priority Critical patent/CN108536361B/zh
Publication of CN108536361A publication Critical patent/CN108536361A/zh
Application granted granted Critical
Publication of CN108536361B publication Critical patent/CN108536361B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0483—Interaction with page-structured environments, e.g. book metaphor
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485—Scrolling or panning
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明公开了一种触控操作的处理方法、装置、存储介质、处理器及终端。该方法包括：响应屏幕内的第一区域的触控操作，触发第一事件和第二事件，其中，第一区域用于对区域内信息进行滚动显示，第一事件用于表示触摸开始，第二事件用于表示触摸移动；从第一事件对应的触控起始位置开始的移动过程中，获取第二事件对应的当前触控对象；根据当前触控对象的类型或是否满足当前触控对象的显示内容已达到浏览边界的条件，触发第三事件，其中，第三事件用于禁止拖拽屏幕内的显示内容。本发明解决了相关技术中所提供的触屏滚动浏览方式易造成导航区域被拖拽的技术问题。

Description

触控操作的处理方法、装置、存储介质、处理器及终端
技术领域
本发明涉及计算机领域，具体而言，涉及一种触控操作的处理方法、装置、存储介质、处理器及终端。
背景技术
目前，鉴于移动终端(例如：智能手机)系统浏览器特性，在内容滚动过程中如果到达浏览边界，则会产生一种“橡皮筋”可拖动、可恢复效果。当使用超文本标记语言(HTML)来实现手机应用(APP)时，若使用底部或顶部导航，则会由于浏览器特性而产生“橡皮筋”效果。当拖动滚动条到底部或顶部时，整个导航会因为被一起拖动而产生偏移，从而降低了使用HTML来实现APP的使用体验。
为此，相关技术中使用绝对定位(absolute)方式来定位导航菜单。内容区域设置y轴可滚动(overflow-y:auto)。这种最基本的HTML定位方式在内容区域内进行滚动时，导航可以正常显示。然而，当持续执行向下滑动操作已经到达最顶部时，如果继续执行向下滑动操作，则会将顶部导航区域也一起拖拽到下方。
由此可见，相关技术中所提供的绝对定位方式只能够减少导航被拖拽的出现机率，但却无法完全避免。而且如果拖动区域起始点位于导航区域部分，同样会产生导航被拖拽的问题。
针对上述的问题，目前尚未提出有效的解决方案。
发明内容
本发明至少部分实施例提供了一种触控操作的处理方法、装置、存储介质、处理器及终端，以至少解决相关技术中所提供的触屏滚动浏览方式易造成导航区域被拖拽的技术问题。
根据本发明其中一实施例，提供了一种触控操作的处理方法，包括：
响应屏幕内的第一区域的触控操作，触发第一事件和第二事件，其中，第一区域用于对区域内信息进行滚动显示，第一事件用于表示触摸开始，第二事件用于表示触摸移动；从第一事件对应的触控起始位置开始的移动过程中，获取第二事件对应的当前触控对象；根据当前触控对象的类型或是否满足当前触控对象的显示内容已达到浏览边界的条件，触发第三事件，其中，第三事件用于禁止拖拽屏幕内的显示内容。
可选地，根据当前触控对象的类型，触发第三事件包括：确定当前触控对象的类型为超文本标记语言中的预设标签，其中，预设标签用于定义文档的主体；触发第三事件。
可选地，根据满足当前触控对象的显示内容已达到浏览边界的条件，触发第三事件包括：确定第一高度大于第二高度，并且已设置新增属性，其中，第一高度为当前触控对象的显示内容的全文高度，第二高度为屏幕内可见区域高度，新增属性用于表示允许独立的滚动区域和触摸回弹；根据触控操作的操作方向和第三高度确定当前触控对象的显示内容已达到浏览边界，其中，第三高度表示在屏幕的长轴方向上的滚动偏移；触发第三事件。
可选地，根据触控操作的操作方向和第三高度确定当前触控对象的显示内容已达到浏览边界包括以下之一：当操作方向从屏幕的上方指向屏幕的下方且第三高度为0时，则确定当前触控对象的显示内容已达到全文高度最顶部；当操作方向从屏幕的下方指向屏幕的上方且第一高度与第三高度的差值为第二高度时，则确定当前触控对象的显示内容已达到全文高度最底部。
可选地，根据未满足当前触控对象的显示内容已达到浏览边界的条件，触发第三事件包括：获取步骤，若确定第一高度小于或等于第二高度，或者未设置新增属性，则获取当前触控对象的父元素，其中，第一高度为当前触控对象的显示内容的全文高度，第二高度为屏幕内可见区域高度，新增属性用于表示允许独立的滚动区域和触摸回弹；判断步骤，判断父元素是否为超文本标记语言中的预设标签，如果是，则触发第三事件，如果否，则转到获取步骤，其中，预设标签用于定义文档的主体。
可选地，确定未满足当前触控对象的显示内容已达到浏览边界的条件，触发第三事件包括：获取步骤，若根据触控操作的操作方向和第三高度确定当前触控对象的显示内容未达到浏览边界，则获取当前触控对象的父元素，其中，第三高度表示在屏幕的长轴方向上的滚动偏移；判断步骤，判断父元素是否为超文本标记语言中的预设标签，如果是，则触发第三事件，如果否，则转到获取步骤，其中，预设标签用于定义文档的主体。
可选地，在响应第一区域的触控操作，触发第一事件和第二事件之前，还包括：将屏幕的显示区域划分为第一区域和第二区域，其中，第二区域用于提供导航信息。
根据本发明其中一实施例，还提供了一种触控操作的处理装置，包括：
触发模块，用于响应屏幕内的第一区域的触控操作，触发第一事件和第二事件，其中，第一区域用于对区域内信息进行滚动显示，第一事件用于表示触摸开始，第二事件用于表示触摸移动；获取模块，用于从第一事件对应的触控起始位置开始的移动过程中，获取第二事件对应的当前触控对象；处理模块，用于根据当前触控对象的类型或是否满足当前触控对象的显示内容已达到浏览边界的条件，触发第三事件，其中，第三事件用于禁止拖拽屏幕内的显示内容。
可选地，处理模块包括：第一确定单元，用于确定当前触控对象的类型为超文本标记语言中的预设标签，其中，预设标签用于定义文档的主体；第一触发单元，用于触发第三事件。
可选地，处理模块包括：第二确定单元，用于确定第一高度大于第二高度，并且已设置新增属性，其中，第一高度为当前触控对象的显示内容的全文高度，第二高度为屏幕内可见区域高度，新增属性用于表示允许独立的滚动区域和触摸回弹；第三确定单元，用于根据触控操作的操作方向和第三高度确定当前触控对象的显示内容已达到浏览边界，其中，第三高度表示在屏幕的长轴方向上的滚动偏移；第二触发单元，用于触发第三事件。
可选地，第三确定单元，用于当操作方向从屏幕的上方指向屏幕的下方且第三高度为0时，则确定当前触控对象的显示内容已达到全文高度最顶部；或者，当操作方向从屏幕的下方指向屏幕的上方且第一高度与第三高度的差值为第二高度时，则确定当前触控对象的显示内容已达到全文高度最底部。
可选地，处理模块包括：第一获取单元，用于若确定第一高度小于或等于第二高度，或者未设置新增属性，则获取当前触控对象的父元素，其中，第一高度为当前触控对象的显示内容的全文高度，第二高度为屏幕内可见区域高度，新增属性用于表示允许独立的滚动区域和触摸回弹；第一判断单元，用于判断父元素是否为超文本标记语言中的预设标签，如果是，则触发第三事件，如果否，则转到第一获取单元，其中，预设标签用于定义文档的主体。
可选地，处理模块包括：第二获取单元，用于若根据触控操作的操作方向和第三高度确定当前触控对象的显示内容未达到浏览边界，则获取当前触控对象的父元素，其中，第三高度表示在屏幕的长轴方向上的滚动偏移；第二判断单元，用于判断父元素是否为超文本标记语言中的预设标签，如果是，则触发第三事件，如果否，则转到第二获取单元，其中，预设标签用于定义文档的主体。
可选地，上述装置还包括：划分模块，用于将屏幕的显示区域划分为第一区域和第二区域，其中，第二区域用于提供导航信息。
根据本发明其中一实施例，还提供了一种存储介质，存储介质包括存储的程序，其中，在程序运行时控制存储介质所在设备执行上述触控操作的处理方法。
根据本发明其中一实施例，还提供了一种处理器，处理器用于运行程序，其中，程序运行时执行上述触控操作的处理方法。
根据本发明其中一实施例，还提供了一种终端，包括：一个或多个处理器，存储器，显示装置以及一个或多个程序，其中，一个或多个程序被存储在存储器中，并且被配置为由一个或多个处理器执行，一个或多个程序用于执行上述触控操作的处理方法。
在本发明至少部分实施例中，采用响应屏幕内的第一区域的触控操作，触发第一事件和第二事件，该第一区域用于对区域内信息进行滚动显示，第一事件用于表示触摸开始，第二事件用于表示触摸移动的方式，通过从第一事件对应的触控起始位置开始的移动过程中，获取第二事件对应的当前触控对象以及根据当前触控对象的类型或是否满足当前触控对象的显示内容已达到浏览边界的条件，触发第三事件，其中，第三事件用于禁止拖拽屏幕内的显示内容，达到了在滚动区域内实现橡皮筋弹性拖动，而导航区域不再受边界影响而整个被拖下的目的，从而实现了确保导航栏不会因为内容滚动区域在达到边界后的持续拖拽而造成移位、提升用户体验的技术效果，进而解决了相关技术中所提供的触屏滚动浏览方式易造成导航区域被拖拽的技术问题。
附图说明
此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：
图1是根据本发明其中一实施例的触控操作的处理方法的流程图；
图2是根据本发明其中一优选实施例的页面布局设计示意图；
图3是根据本发明其中一实施例的触控操作的处理装置的结构框图；
图4是根据本发明其中一优选实施例的触控操作的处理装置的结构框图。
具体实施方式
为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。
需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
根据本发明其中一实施例，提供了一种触控操作的处理方法的实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。
图1是根据本发明其中一实施例的触控操作的处理方法的流程图，如图1所示，该方法包括如下步骤：
步骤S12，响应屏幕内的第一区域的触控操作，触发第一事件和第二事件，其中，第一区域用于对区域内信息进行滚动显示，第一事件用于表示触摸开始，第二事件用于表示触摸移动；
步骤S14，从第一事件对应的触控起始位置开始的移动过程中，获取第二事件对应的当前触控对象；
步骤S16，根据当前触控对象的类型或是否满足当前触控对象的显示内容已达到浏览边界的条件，触发第三事件，其中，第三事件用于禁止拖拽屏幕内的显示内容。
通过上述步骤，可以采用响应屏幕内的第一区域的触控操作，触发第一事件和第二事件，该第一区域用于对区域内信息进行滚动显示，第一事件用于表示触摸开始，第二事件用于表示触摸移动的方式，通过从第一事件对应的触控起始位置开始的移动过程中，获取第二事件对应的当前触控对象以及根据当前触控对象的类型或是否满足当前触控对象的显示内容已达到浏览边界的条件，触发第三事件，其中，第三事件用于禁止拖拽屏幕内的显示内容，达到了在滚动区域内实现橡皮筋弹性拖动，而导航区域不再受边界影响而整个被拖下的目的，从而实现了确保导航栏不会因为内容滚动区域在达到边界后的持续拖拽而造成移位、提升用户体验的技术效果，进而解决了相关技术中所提供的触屏滚动浏览方式易造成导航区域被拖拽的技术问题。
可选地，在步骤S12，响应第一区域的触控操作，触发第一事件和第二事件之前，还可以包括以下执行步骤：
步骤S10，将屏幕的显示区域划分为第一区域和第二区域，其中，第二区域用于提供导航信息。
造成导航被拖动移位的根本原因在于：浏览器最外层(html)具有橡皮筋弹性特性，即整个页面到达边界后还可以继续被拖动一小段距离，而在用户放手后页面会恢复到页面边界位置，而导航区域便包含其中。为此，在本发明提供的实施例中使用-webkit-overflow-scrolling属性，来构造一个可以滚动的内容滚动区，当在内容滚动区执行滑动操作时，仅在内容滚动区内发生橡皮筋效果，从而可以在移动终端的浏览器或混合型应用中解决内容滚动区的顶部(或底部)的导航区不会因为内容滚动区在发生滚动过程中已经到达边界而发生移位。
图2是根据本发明其中一优选实施例的页面布局设计示意图。如图2所示，页面布局包括：导航区a1(相当于上述第二区域)和内容滚动区a2(相当于上述第一区域)。在a2上添加样式来构建一个可以拉伸的区域：
{overflow-y:auto；-webkit-overflow-scrolling:touch；}，
从而通过使用-webkit-overflow-scrolling属性将内容滚动区域从HTML最外层迁移到a2。
为此，首先需要判断移动终端是否支持-webkit-overflow-scrolling属性，在body最外层(即<body>标签下第一层)模拟构造一个div并且添加到文档对象模型(DOM)中，设置该div的style的WebkitOverflowScrolling为touch。然后，使用getComputedStyle来检测div是否设置成功。如果不成功，那么可以确定该移动终端不支持此项功能或者确定当前使用的是个人计算机(PC)端。
webkit-overflow-scrolling属性用于指定元素是否使用滚动回弹效果(native-style)来滚动溢出内容。该属性用来控制元素在移动设备上是否使用滚动回弹效果，包含auto和touch两个值，其中，auto表示默认值，当触摸介质从触摸屏上移开时，滚动会立即停止，相当于普通的滚动效果；touch表示使用具有回弹效果的滚动，当触摸介质从触摸屏上移开时，内容会继续保持一段时间的滚动效果，继续滚动的速度与持续的时间和滚动手势的强烈程度成正比。
body是一种HTML标签，<body>标签定义文档的主体。<body>元素包含文档的所有内容，例如：文本、超链接、图像、表格、列表。
div是一种HTML标签，<div>标签可以将文档分割为多个独立的、不同的部分。该标签可以用作严格的组织工具，并且不使用任何格式与其关联。
HTML DOM将HTML文档视作树结构。这种结构被称为节点树。树中的所有节点均可通过JavaScript进行访问。所有HTML元素(节点)均可被修改，也可以创建或删除节点。
style是指HTML标签的style属性，style属性规定元素的行内样式。
WebkitOverflowScrolling与-webkit-overflow-scrolling含义一致，只是在通过style赋值时写法与直接编写层叠样式表(CSS)略有不同。
getComputedStyle是window对象的基础方法，该方法提供应用活动样式表后的元素的所有CSS属性的值，并解析这些值可能包含的任何基本计算。
可选地，在步骤S16中，根据当前触控对象的类型，触发第三事件可以包括以下执行步骤：
步骤S161，确定当前触控对象的类型为超文本标记语言中的预设标签，其中，预设标签用于定义文档的主体；
步骤S162，触发第三事件。
在组件初始化过程中，添加触摸开始(touchstart)事件e1和触摸移动(touchmove)的事件e2，其中，e1用于触摸介质在触摸到一个DOM元素时触发，e2用于触摸介质在一个DOM元素上滑动时触发。
以屏幕的左上角为坐标原点，当触摸介质开始滑动时，触发e1，记录滑动开始时，相对于屏幕的垂直坐标y1，其中，y1为触摸介质开始滑动时的第一y轴位置且y1的取值为原点到y1的y轴的像素距离。在滑动过程中触发e2，以获取当前触控对象。屏幕从响应用户点击操作到开始滑动时，会触发上述添加的touchstart事件，并在滑动过程中，事件会返回一个对象event，因此可以通过该event来获取当前点击的元素event.target。
如果当前触控对象的类型为上述body标签，那么将终止滚动操作。另外，如果当前触控对象的类型为输入框，则对输入框的滚动不作任何处理。
可选地，在步骤S16中，根据满足当前触控对象的显示内容已达到浏览边界的条件，触发第三事件可以包括以下执行步骤：
步骤S163，确定第一高度大于第二高度，并且已设置新增属性，其中，第一高度为当前触控对象的显示内容的全文高度，第二高度为屏幕内可见区域高度，新增属性用于表示允许独立的滚动区域和触摸回弹；
步骤S164，根据触控操作的操作方向和第三高度确定当前触控对象的显示内容已达到浏览边界，其中，第三高度表示在屏幕的长轴方向上的滚动偏移；
步骤S165，触发第三事件。
假设当前触控对象的内容全文高度(scrollHeight)为sh2，其包括：肉眼无法看见、溢出、被窗口遮挡的部分，屏幕内可见区域高度(offsetHeight)为oh2，此时如果sh2大于oh2，即可执行滚动操作，并且当前触控对象的属性已经被标记为“-webkit-overflow-scrolling:touch；”则可以继续往下执行滑动操作。
假设当前触控对象y轴滚动偏移为(scrollTop)st2，触摸介质当前坐标相对于屏幕的垂直坐标为y2，其中，st2用于表示内容是否已经滚动到或处于顶部，y2为触摸介质结束滑动时的第二y轴位置且y2的取值为原点到y2的y轴的像素距离，那么根据由y1和y2确定的操作方向以及st2确定当前触控对象的显示内容已达到浏览边界，进而终止滚动操作。
在优选实施过程中，上述步骤S164中，根据触控操作的操作方向和第三高度确定当前触控对象的显示内容已达到浏览边界包括以下方式之一：
方式一、当操作方向从屏幕的上方指向屏幕的下方且第三高度为0时，则确定当前触控对象的显示内容已达到全文高度最顶部；
方式二、当操作方向从屏幕的下方指向屏幕的上方且第一高度与第三高度的差值为第二高度时，则确定当前触控对象的显示内容已达到全文高度最底部。
当y1≤y2时，表明触控操作的操作方向由屏幕上方指向屏幕下方。如果y1≤y2并且当前st2为0，则确定当前触控对象的显示内容已达到全文高度最顶部，此时需要禁止滚动操作。当y1≥y2时，表明触控操作的操作方向由屏幕下方指向屏幕上方。如果y1≥y2并且sh2-st2＝oh2，则确定当前触控对象的显示内容已达到全文高度最底部，此时同样需要禁止滚动操作。如果确定当前位置位于当前触控对象的显示内容已达到全文高度最顶部或最底部时，终止滚动操作，以防止导航区被拖拽。
可选地，步骤S16，根据未满足当前触控对象的显示内容已达到浏览边界的条件，触发第三事件可以包括以下执行步骤：
步骤S166，若确定第一高度小于或等于第二高度，或者未设置新增属性，则获取当前触控对象的父元素，其中，第一高度为当前触控对象的显示内容的全文高度，第二高度为屏幕内可见区域高度，新增属性用于表示允许独立的滚动区域和触摸回弹；
步骤S167，判断父元素是否为超文本标记语言中的预设标签，如果是，则触发第三事件，如果否，则转到步骤S166，其中，预设标签用于定义文档的主体。
基于上述分析，仍然假设当前触控对象的scrollHeight为sh2，其同样包括：肉眼无法看见、溢出、被窗口遮挡的部分，而且offsetHeight为oh2，此时如果sh2小于或等于oh2，或者，在当前触控对象未查找到标记“-webkit-overflow-scrolling:touch；”，则需要将当前触控对象设置为自身的父对象，并持续判断当前触控对象是否为body标签。如果当前触控对象不是body标签，则重复上述判断，直到当前触控对象为body标签，则终止滚动操作，以阻止拖拽事件发生。
可选地，在步骤S16中，确定未满足当前触控对象的显示内容已达到浏览边界的条件，触发第三事件可以包括以下执行步骤：
步骤S168，若根据触控操作的操作方向和第三高度确定当前触控对象的显示内容未达到浏览边界，则获取当前触控对象的父元素，其中，第三高度表示在屏幕的长轴方向上的滚动偏移；
步骤S169，判断父元素是否为超文本标记语言中的预设标签，如果是，则触发第三事件，如果否，则转到步骤S168，其中，预设标签用于定义文档的主体。
如果通过上述y1与y2的比较结果和st2的取值确定当前触控对象的显示内容未达到全文高度最顶部，以及通过上述y1与y2的比较结果和sh2与st2的差值确定当前触控对象的显示内容未达到全文高度最底部，则需要将当前触控对象设置为自身的父对象，并持续判断当前触控对象是否为body标签。如果当前触控对象不是body标签，则重复上述判断，直到当前触控对象为body标签，则终止滚动操作，以阻止拖拽事件发生。
根据本发明其中一实施例，提供了一种触控操作的处理装置的实施例，图3是根据本发明其中一实施例的触控操作的处理装置的结构框图，如图3所示，该装置包括：触发模块10，用于响应屏幕内的第一区域的触控操作，触发第一事件和第二事件，其中，第一区域用于对区域内信息进行滚动显示，第一事件用于表示触摸开始，第二事件用于表示触摸移动；获取模块20，用于从第一事件对应的触控起始位置开始的移动过程中，获取第二事件对应的当前触控对象；处理模块30，用于根据当前触控对象的类型或是否满足当前触控对象的显示内容已达到浏览边界的条件，触发第三事件，其中，第三事件用于禁止拖拽屏幕内的显示内容。
可选地，处理模块30包括：第一确定单元(图中未示出)，用于确定当前触控对象的类型为超文本标记语言中的预设标签，其中，预设标签用于定义文档的主体；第一触发单元(图中未示出)，用于触发第三事件。
可选地，处理模块30包括：第二确定单元(图中未示出)，用于确定第一高度大于第二高度，并且已设置新增属性，其中，第一高度为当前触控对象的显示内容的全文高度，第二高度为屏幕内可见区域高度，新增属性用于表示允许独立的滚动区域和触摸回弹；第三确定单元(图中未示出)，用于根据触控操作的操作方向和第三高度确定当前触控对象的显示内容已达到浏览边界，其中，第三高度表示在屏幕的长轴方向上的滚动偏移；第二触发单元(图中未示出)，用于触发第三事件。
可选地，第三确定单元(图中未示出)，用于当操作方向从屏幕的上方指向屏幕的下方且第三高度为0时，则确定当前触控对象的显示内容已达到全文高度最顶部；或者，当操作方向从屏幕的下方指向屏幕的上方且第一高度与第三高度的差值为第二高度时，则确定当前触控对象的显示内容已达到全文高度最底部。
可选地，处理模块30包括：第一获取单元(图中未示出)，用于若确定第一高度小于或等于第二高度，或者未设置新增属性，则获取当前触控对象的父元素，其中，第一高度为当前触控对象的显示内容的全文高度，第二高度为屏幕内可见区域高度，新增属性用于表示允许独立的滚动区域和触摸回弹；第一判断单元(图中未示出)，用于判断父元素是否为超文本标记语言中的预设标签，如果是，则触发第三事件，如果否，则转到第一获取单元，其中，预设标签用于定义文档的主体。
可选地，处理模块30包括：第二获取单元(图中未示出)，用于若根据触控操作的操作方向和第三高度确定当前触控对象的显示内容未达到浏览边界，则获取当前触控对象的父元素，其中，第三高度表示在屏幕的长轴方向上的滚动偏移；第二判断单元(图中未示出)，用于判断父元素是否为超文本标记语言中的预设标签，如果是，则触发第三事件，如果否，则转到第二获取单元，其中，预设标签用于定义文档的主体。
可选地，图4是根据本发明其中一优选实施例的触控操作的处理装置的结构框图，如图4所示，上述装置还包括：划分模块40，用于将屏幕的显示区域划分为第一区域和第二区域，其中，第二区域用于提供导航信息。
根据本发明其中一实施例，还提供了一种存储介质，存储介质包括存储的程序，其中，在程序运行时控制存储介质所在设备执行上述触控操作的处理方法。上述存储介质可以包括但不限于：U盘、只读存储器(ROM)、随机存取存储器(RAM)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。
根据本发明其中一实施例，还提供了一种处理器，处理器用于运行程序，其中，程序运行时执行上述触控操作的处理方法。上述处理器可以包括但不限于：微处理器(MCU)或可编程逻辑器件(FPGA)等的处理装置。
根据本发明其中一实施例，还提供了一种终端，包括：一个或多个处理器，存储器，显示装置以及一个或多个程序，其中，一个或多个程序被存储在存储器中，并且被配置为由一个或多个处理器执行，一个或多个程序用于执行上述触控操作的处理方法。在一些实施例中，上述终端可以是智能手机(例如：Android手机、iOS手机等)、平板电脑、掌上电脑以及移动互联网设备(Mobile Internet Devices，简称为MID)、PAD等终端设备。上述显示装置可以是触摸屏式的液晶显示器(LCD)，该液晶显示器可使得用户能够与终端的用户界面进行交互。此外，上述终端还可以包括：输入/输出接口(I/O接口)、通用串行总线(USB)端口、网络接口、电源和/或相机。
上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。
在本发明的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。
在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，可以为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (17)

1.一种触控操作的处理方法，其特征在于，包括：
响应屏幕内的第一区域的触控操作，触发第一事件和第二事件，其中，所述第一区域用于对区域内信息进行滚动显示，所述第一事件用于表示触摸开始，第二事件用于表示触摸移动；
从所述第一事件对应的触控起始位置开始的移动过程中，获取所述第二事件对应的当前触控对象；
根据所述当前触控对象的类型或是否满足所述当前触控对象的显示内容已达到浏览边界的条件，触发第三事件，其中，所述第三事件用于禁止拖拽所述屏幕内的显示内容。
2.根据权利要求1所述的方法，其特征在于，根据所述当前触控对象的类型，触发所述第三事件包括：
确定所述当前触控对象的类型为超文本标记语言中的预设标签，其中，所述预设标签用于定义文档的主体；
触发所述第三事件。
3.根据权利要求1所述的方法，其特征在于，根据满足所述当前触控对象的显示内容已达到所述浏览边界的条件，触发所述第三事件包括：
确定第一高度大于第二高度，并且已设置新增属性，其中，所述第一高度为所述当前触控对象的显示内容的全文高度，所述第二高度为所述屏幕内可见区域高度，所述新增属性用于表示允许独立的滚动区域和触摸回弹；
根据所述触控操作的操作方向和第三高度确定所述当前触控对象的显示内容已达到所述浏览边界，其中，所述第三高度表示在所述屏幕的长轴方向上的滚动偏移；
触发所述第三事件。
4.根据权利要求3所述的方法，其特征在于，根据所述触控操作的操作方向和第三高度确定所述当前触控对象的显示内容已达到所述浏览边界包括以下之一：
当所述操作方向从所述屏幕的上方指向所述屏幕的下方且所述第三高度为0时，则确定所述当前触控对象的显示内容已达到全文高度最顶部；
当所述操作方向从所述屏幕的下方指向所述屏幕的上方且所述第一高度与所述第三高度的差值为所述第二高度时，则确定所述当前触控对象的显示内容已达到全文高度最底部。
5.根据权利要求1所述的方法，其特征在于，根据未满足所述当前触控对象的显示内容已达到所述浏览边界的条件，触发所述第三事件包括：
获取步骤，若确定第一高度小于或等于第二高度，或者未设置新增属性，则获取所述当前触控对象的父元素，其中，所述第一高度为所述当前触控对象的显示内容的全文高度，所述第二高度为所述屏幕内可见区域高度，所述新增属性用于表示允许独立的滚动区域和触摸回弹；
判断步骤，判断所述父元素是否为超文本标记语言中的预设标签，如果是，则触发所述第三事件，如果否，则转到所述获取步骤，其中，所述预设标签用于定义文档的主体。
6.根据权利要求1所述的方法，其特征在于，根据未满足所述当前触控对象的显示内容已达到所述浏览边界的条件，触发所述第三事件包括：
获取步骤，若根据所述触控操作的操作方向和第三高度确定所述当前触控对象的显示内容未达到所述浏览边界，则获取所述当前触控对象的父元素，其中，所述第三高度表示在所述屏幕的长轴方向上的滚动偏移；
判断步骤，判断所述父元素是否为超文本标记语言中的预设标签，如果是，则触发所述第三事件，如果否，则转到所述获取步骤，其中，所述预设标签用于定义文档的主体。
7.根据权利要求1所述的方法，其特征在于，在响应所述第一区域的所述触控操作，触发所述第一事件和所述第二事件之前，还包括：
将所述屏幕的显示区域划分为所述第一区域和第二区域，其中，所述第二区域用于提供导航信息。
8.一种触控操作的处理装置，其特征在于，包括：
触发模块，用于响应屏幕内的第一区域的触控操作，触发第一事件和第二事件，其中，所述第一区域用于对区域内信息进行滚动显示，所述第一事件用于表示触摸开始，第二事件用于表示触摸移动；
获取模块，用于从所述第一事件对应的触控起始位置开始的移动过程中，获取所述第二事件对应的当前触控对象；
处理模块，用于根据所述当前触控对象的类型或是否满足所述当前触控对象的显示内容已达到浏览边界的条件，触发第三事件，其中，所述第三事件用于禁止拖拽所述屏幕内的显示内容。
9.根据权利要求8所述的装置，其特征在于，所述处理模块包括：
第一确定单元，用于确定所述当前触控对象的类型为超文本标记语言中的预设标签，其中，所述预设标签用于定义文档的主体；
第一触发单元，用于触发所述第三事件。
10.根据权利要求8所述的装置，其特征在于，所述处理模块包括：
第二确定单元，用于确定第一高度大于第二高度，并且已设置新增属性，其中，所述第一高度为所述当前触控对象的显示内容的全文高度，所述第二高度为所述屏幕内可见区域高度，所述新增属性用于表示允许独立的滚动区域和触摸回弹；
第三确定单元，用于根据所述触控操作的操作方向和第三高度确定所述当前触控对象的显示内容已达到所述浏览边界，其中，所述第三高度表示在所述屏幕的长轴方向上的滚动偏移；
第二触发单元，用于触发所述第三事件。
11.根据权利要求10所述的装置，其特征在于，所述第三确定单元，用于当所述操作方向从所述屏幕的上方指向所述屏幕的下方且所述第三高度为0时，则确定所述当前触控对象的显示内容已达到全文高度最顶部；或者，当所述操作方向从所述屏幕的下方指向所述屏幕的上方且所述第一高度与所述第三高度的差值为所述第二高度时，则确定所述当前触控对象的显示内容已达到全文高度最底部。
12.根据权利要求8所述的装置，其特征在于，所述处理模块包括：
第一获取单元，用于若确定第一高度小于或等于第二高度，或者未设置新增属性，则获取所述当前触控对象的父元素，其中，所述第一高度为所述当前触控对象的显示内容的全文高度，所述第二高度为所述屏幕内可见区域高度，所述新增属性用于表示允许独立的滚动区域和触摸回弹；
第一判断单元，用于判断所述父元素是否为超文本标记语言中的预设标签，如果是，则触发所述第三事件，如果否，则转到所述第一获取单元，其中，所述预设标签用于定义文档的主体。
13.根据权利要求8所述的装置，其特征在于，所述处理模块包括：
第二获取单元，用于若根据所述触控操作的操作方向和第三高度确定所述当前触控对象的显示内容未达到所述浏览边界，则获取所述当前触控对象的父元素，其中，所述第三高度表示在所述屏幕的长轴方向上的滚动偏移；
第二判断单元，用于判断所述父元素是否为超文本标记语言中的预设标签，如果是，则触发所述第三事件，如果否，则转到所述第二获取单元，其中，所述预设标签用于定义文档的主体。
14.根据权利要求8所述的装置，其特征在于，所述装置还包括：
划分模块，用于将所述屏幕的显示区域划分为所述第一区域和第二区域，其中，所述第二区域用于提供导航信息。
15.一种存储介质，其特征在于，所述存储介质包括存储的程序，其中，在所述程序运行时控制所述存储介质所在设备执行权利要求1至7中任意一项所述的触控操作的处理方法。
16.一种处理器，其特征在于，所述处理器用于运行程序，其中，所述程序运行时执行权利要求1至7中任意一项所述的触控操作的处理方法。
17.一种终端，其特征在于，包括：一个或多个处理器，存储器，显示装置以及一个或多个程序，其中，所述一个或多个程序被存储在所述存储器中，并且被配置为由所述一个或多个处理器执行，所述一个或多个程序用于执行权利要求1至7中任意一项所述的触控操作的处理方法。
CN201810288169.XA 2018-04-03 2018-04-03 触控操作的处理方法、装置、存储介质、处理器及终端 Active CN108536361B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201810288169.XA CN108536361B (zh) 2018-04-03 2018-04-03 触控操作的处理方法、装置、存储介质、处理器及终端

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201810288169.XA CN108536361B (zh) 2018-04-03 2018-04-03 触控操作的处理方法、装置、存储介质、处理器及终端

Publications (2)

Publication Number Publication Date
CN108536361A true CN108536361A (zh) 2018-09-14
CN108536361B CN108536361B (zh) 2021-06-22

Family

ID=63482381

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201810288169.XA Active CN108536361B (zh) 2018-04-03 2018-04-03 触控操作的处理方法、装置、存储介质、处理器及终端

Country Status (1)

Country Link
CN (1) CN108536361B (zh)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109298819A (zh) * 2018-09-21 2019-02-01 Oppo广东移动通信有限公司 选择对象的方法、装置、终端及存储介质
CN109976857A (zh) * 2019-03-27 2019-07-05 北京字节跳动网络技术有限公司 终端界面的显示控制方法、装置、存储介质及电子设备
CN110209447A (zh) * 2019-04-28 2019-09-06 五八有限公司 一种列表页数据显示方法以及列表页数据显示装置
CN113655931A (zh) * 2021-07-21 2021-11-16 北京搜狗科技发展有限公司 浏览内容的处理方法、装置和介质
CN114995588A (zh) * 2021-03-01 2022-09-02 华为技术有限公司 一种输入装置、输入控制方法和终端设备

Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101819594A (zh) * 2010-04-23 2010-09-01 四川长虹电器股份有限公司 嵌入式浏览器中实现跑马灯效果的方法
CN104423634A (zh) * 2013-08-20 2015-03-18 陕西平杰科工贸有限公司 一种具有至顶、至底功能按键的鼠标
CN105022567A (zh) * 2014-04-30 2015-11-04 惠州市德赛西威汽车电子股份有限公司 一种通过鼠标拖拽滑动切换界面的方法
CN105637464A (zh) * 2013-09-10 2016-06-01 谷歌公司 用于网站和内容的滚动结束效果
CN106155524A (zh) * 2015-03-23 2016-11-23 阿里巴巴集团控股有限公司 页面控制方法及装置
CN106201185A (zh) * 2016-06-29 2016-12-07 北京海尔广科数字技术有限公司 一种浏览器中输入框的定位方法、装置及移动设备
CN107463321A (zh) * 2016-06-02 2017-12-12 统专利有限责任两合公司 用于滚动视觉页面内容的方法和用于滚动视觉页面内容的系统
CN107479795A (zh) * 2017-07-07 2017-12-15 阿里巴巴集团控股有限公司 滚动处理方法、装置及电子设备

Patent Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101819594A (zh) * 2010-04-23 2010-09-01 四川长虹电器股份有限公司 嵌入式浏览器中实现跑马灯效果的方法
CN104423634A (zh) * 2013-08-20 2015-03-18 陕西平杰科工贸有限公司 一种具有至顶、至底功能按键的鼠标
CN105637464A (zh) * 2013-09-10 2016-06-01 谷歌公司 用于网站和内容的滚动结束效果
CN105022567A (zh) * 2014-04-30 2015-11-04 惠州市德赛西威汽车电子股份有限公司 一种通过鼠标拖拽滑动切换界面的方法
CN106155524A (zh) * 2015-03-23 2016-11-23 阿里巴巴集团控股有限公司 页面控制方法及装置
CN107463321A (zh) * 2016-06-02 2017-12-12 统专利有限责任两合公司 用于滚动视觉页面内容的方法和用于滚动视觉页面内容的系统
CN106201185A (zh) * 2016-06-29 2016-12-07 北京海尔广科数字技术有限公司 一种浏览器中输入框的定位方法、装置及移动设备
CN107479795A (zh) * 2017-07-07 2017-12-15 阿里巴巴集团控股有限公司 滚动处理方法、装置及电子设备

Non-Patent Citations (4)

* Cited by examiner, † Cited by third party
Title
HAOROOMS: "手机网站表层div滑动，导致底层body滑动（touchmove的阻止）", 《HTTPS://WWW.HAOROOMS.COM/POST/WEBAPP_BODYSLIDEBCDIV》 *
HOWIECHIH: "jQuery判断页面滚动到底部", 《HTTPS://WWW.CNBLOGS.COM/HOWIECHIH/P/4734928.HTML》 *
MUWENZI: "解决浏览器上下滚动露出底色问题（滚动回弹 or 橡皮筋效果）", 《HTTPS://GITISSUE.COM/ISSUES/5A24B16A1D1A9547E6768162》 *
程序园: "移动端滚动的橡皮筋问题", 《HTTP://WWW.VOIDCN.COM/ARTICLE/P-WUOLRLNJ-BQK.HTML》 *

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109298819A (zh) * 2018-09-21 2019-02-01 Oppo广东移动通信有限公司 选择对象的方法、装置、终端及存储介质
CN109298819B (zh) * 2018-09-21 2021-03-16 Oppo广东移动通信有限公司 选择对象的方法、装置、终端及存储介质
CN109976857A (zh) * 2019-03-27 2019-07-05 北京字节跳动网络技术有限公司 终端界面的显示控制方法、装置、存储介质及电子设备
WO2020192246A1 (zh) * 2019-03-27 2020-10-01 北京字节跳动网络技术有限公司 终端界面的显示控制方法、装置、存储介质及电子设备
CN110209447A (zh) * 2019-04-28 2019-09-06 五八有限公司 一种列表页数据显示方法以及列表页数据显示装置
CN114995588A (zh) * 2021-03-01 2022-09-02 华为技术有限公司 一种输入装置、输入控制方法和终端设备
CN114995588B (zh) * 2021-03-01 2024-05-03 华为技术有限公司 一种输入装置、输入控制方法和终端设备
CN113655931A (zh) * 2021-07-21 2021-11-16 北京搜狗科技发展有限公司 浏览内容的处理方法、装置和介质

Also Published As

Publication number Publication date
CN108536361B (zh) 2021-06-22

Similar Documents

Publication Publication Date Title
CN108536361A (zh) 触控操作的处理方法、装置、存储介质、处理器及终端
US10444961B2 (en) Hover-based interaction with rendered content
CN105446673B (zh) 屏幕显示的方法及终端设备
CN105700800B (zh) 一种页面信息的操作方法、装置及电子设备
CN108829327B (zh) 交互智能设备的书写方法和装置
CN109358795A (zh) 界面信息的浏览方法及装置、电子设备
CN106527888B (zh) 滑屏查找页面的方法及装置
CN103488411A (zh) 切换页面的方法和装置
CN103324390B (zh) 用于页面浏览的交互方法、浏览器装置以及移动终端
CN110413187B (zh) 交互智能设备的批注的处理方法和装置
CN110968227B (zh) 智能交互平板的控制方法和装置
KR20160094442A (ko) 플로팅 터치에 기초한 클릭 객체 확대 방법 및 장치
CN105528200B (zh) 浏览器标签页的显示方法及装置
CN106681616B (zh) 一种浏览器功能栏显示方法、装置及设备
CN103135929A (zh) 控制应用界面移动的方法、装置和终端设备
WO2014082303A1 (zh) 终端和屏幕背光的控制方法
CN106843640A (zh) 一种显示页面的控制方法及手持终端
Liu et al. Wigglite: Low-cost information collection and triage
CN104572997A (zh) 内容获取方法、装置及用户设备
CN106775256A (zh) 图标跨屏滑动方法及装置
CN103268199B (zh) 一种交互方法、装置及移动设备
CN106843698A (zh) 一种交互式滚动条展示方法及电子设备
CN106372137A (zh) 多窗口页面显示处理方法及装置
JP5974809B2 (ja) 表示装置、表示制御方法及び表示制御プログラム
JP6089570B2 (ja) 表示装置、表示制御方法及び表示制御プログラム

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant