CN111782122B - 一种响应用户操作的方法、装置、终端及存储介质 - Google Patents
一种响应用户操作的方法、装置、终端及存储介质 Download PDFInfo
- Publication number
- CN111782122B CN111782122B CN202010438336.1A CN202010438336A CN111782122B CN 111782122 B CN111782122 B CN 111782122B CN 202010438336 A CN202010438336 A CN 202010438336A CN 111782122 B CN111782122 B CN 111782122B
- Authority
- CN
- China
- Prior art keywords
- scrollable
- ancestor
- touch
- elements
- target element
- 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.)
- Active
Links
Images
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/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/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/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
-
- 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
- G06F3/04883—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 for inputting data by handwriting, e.g. gesture or text
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)
- Position Input By Displaying (AREA)
Abstract
本公开提供了一种响应用户操作的方法、装置、终端及存储介质。所述方法包括:在检测到用户对页面中的目标元素的触摸操作时,获得目标元素的可滚动的祖先元素;在再次检测到用户对目标元素的触摸操作时,判断可滚动的祖先元素是否处于滚动状态;在每一个可滚动的祖先元素均未处于滚动状态时,响应目标元素对应的触摸事件。在上述过程中,针对用户的首次触摸操作获得目标元素的所有的可滚动的祖先元素,避免了祖先元素获取不全面时所带来的问题,在所有的可滚动的祖先元素均未处于滚动状态时响应目标元素的触摸事件,防止了层级较高的可滚动的祖先元素处于滚动状态时导致的触摸事件的误触发现象,显著改善了用户的使用体验。
Description
技术领域
本公开涉及前端交互技术领域,尤其涉及一种响应用户操作的方法、装置、终端及存储介质。
背景技术
Fastclick是FTLabs开发的一款开源工具,其采用JavaScript语言编写,可利用移动端上的Touch系列事件(例如:touchstart事件、touchend事件等)来实现一个自定义的tap事件(类似于click事件)。然而,基于Fastclick实现的tap事件在触发时存在诸多问题,一是无法全面地判定一个元素是否为可滚动元素,导致手指在触摸屏幕的目标元素时,某些可滚动容器的内部元素的tap事件存在误触发现象;二是没有对目标元素的所有的可滚动祖先元素进行全方位考虑,同样存在与上述提到的手指在触摸屏幕的目标元素时,某些可滚动容器的内部元素的tap事件存在误触发现象的相同的问题。因而,相关技术中,急需一种能更好的响应用户操作的方法,以改善用户的使用体验。
发明内容
本公开提供一种响应用户操作的方法、装置、终端及存储介质,旨在解决上述背景技术中存在的问题,面向用户提供一种更好的响应用户操作的方法,以改善用户的使用体验。
根据本公开实施例的第一方面,提供了一种响应用户操作的方法,所述方法包括:
在检测到用户对页面中的目标元素的触摸操作时,标记所述目标元素的可滚动的祖先元素,所述目标元素的可滚动的祖先元素为所述目标元素的上级元素;
在再次检测到用户对所述目标元素的触摸操作时,若每一个已标记的可滚动的祖先元素均未处于滚动状态,响应所述目标元素对应的触摸事件。
可选地,在检测到用户对页面中的目标元素的触摸操作时,标记所述目标元素的可滚动的祖先元素,包括:
在检测到用户对页面中的目标元素的触摸操作时,为所述目标元素添加触摸开始事件;
响应所述触摸开始事件,获得所述目标元素的可滚动的祖先元素,并为每一个所述可滚动祖先元素添加触摸结束事件,以标记每一个所述可滚动祖先元素;
在再次检测到用户对所述目标元素的触摸操作时,若每一个所述可滚动的祖先元素均未处于滚动状态,响应所述目标元素对应的触摸事件,包括:
在再次检测到用户对所述目标元素的触摸操作时,响应所述触摸结束事件,获得每一个已标记的可滚动的祖先元素的运动状态;
在所述运动状态表示所述每一个已标记的可滚动的祖先元素均未处于滚动状态时,响应所述目标元素对应的触摸事件。
可选地,为每一个所述可滚动祖先元素添加触摸结束事件,包括:
执行所述触摸开始事件中的事件处理函数,以为每一个所述可滚动的祖先元素添加触摸结束事件,所述事件处理函数用于为网页元素添加触摸结束事件,所述触摸结束事件在监听到用户对所述目标元素的触摸操作时触发。
可选地,所述方法还包括:
在所述可滚动的祖先元素中有一个祖先元素处于滚动状态时,禁止响应所述目标元素对应的触摸事件,同时将所述祖先元素的滚动状态调整为暂停状态。
可选地,禁止响应所述目标元素对应的触摸事件,包括:
获得处于滚动状态的祖先元素的触摸结束事件;
阻止所述触摸结束事件的传递。
可选地,在禁止响应所述目标元素对应的触摸事件后,所述方法还包括:
阻断所有可滚动的祖先元素的触摸结束事件对目标触摸操作的监听,所述目标触摸操作为用户对所述目标元素的触摸操作。
可选地,标记所述目标元素的可滚动的祖先元素,包括:
获得页面中的所有的垂直向可滚动的元素和横向可滚动的元素,所述垂直向可滚动的元素和所述横向可滚动的元素中包括所述目标元素的可滚动的祖先元素;
在所述垂直向可滚动的元素和所述横向可滚动的元素中标记所述目标元素的可滚动的祖先元素。
可选地,获得页面中的所有的垂直向可滚动的元素和横向可滚动的元素,包括:
将页面中的所有内容区高度大于边框高度的元素确定为垂直向可滚动的元素;
获得所述垂直向可滚动的元素;
将页面中的所有内容区宽度大于边框宽度的元素确定为横向可滚动的元素;
获得所述横向可滚动的元素。
可选地,在获得所述目标元素的可滚动的祖先元素之后,所述方法还包括:
记录每一个所述可滚动的祖先元素的初始的滚动条位置;
在再次检测到用户对所述目标元素的触摸操作时,若每一个已标记的可滚动的祖先元素均未处于滚动状态,响应所述目标元素对应的触摸事件,包括:
在再次检测到用户对所述目标元素的触摸操作时,若所述当前的滚动条位置,与所述初始的滚动条位置相同,确定每一个已标记的可滚动的祖先元素均未处于滚动状态;
响应所述目标元素对应的触摸事件。
可选地,在再次检测到用户对所述目标元素的触摸操作时,响应所述触摸结束事件,获得每一个已标记的可滚动的祖先元素的运动状态,包括:
在再次检测到用户对所述目标元素的触摸操作时,响应所述触摸结束事件,按照所述可滚动的祖先元素的级别由高到低的次序,依次获得每一个已标记的可滚动的祖先元素的运动状态。
根据本公开实施例的第二方面,提供一种响应用户操作的装置,所述装置包括:
获得模块,用于在检测到用户对页面中的目标元素的触摸操作时,标记所述目标元素的可滚动的祖先元素,所述目标元素的可滚动的祖先元素为所述目标元素的上级元素;
响应模块,用于在再次检测到用户对所述目标元素的触摸操作时,若每一个已标记的可滚动的祖先元素均未处于滚动状态,响应所述目标元素对应的触摸事件。
可选地,所述获得模块包括:
第一添加模块,用于在检测到用户对页面中的目标元素的触摸操作时,为所述目标元素添加触摸开始事件;
第二添加模块,用于响应所述触摸开始事件,获得所述目标元素的可滚动的祖先元素,并为每一个所述可滚动祖先元素添加触摸结束事件,以标记每一个所述可滚动祖先元素;
所述响应模块包括:
第一响应子模块,用于在再次检测到用户对所述目标元素的触摸操作时,响应所述触摸结束事件,获得每一个已标记的可滚动的祖先元素的运动状态;
第二响应子模块,用于在所述运动状态表示所述每一个已标记的可滚动的祖先元素均未处于滚动状态时,响应所述目标元素对应的触摸事件。
可选地,所述第二添加模块包括:
执行模块,用于执行所述触摸开始事件中的事件处理函数,以为每一个所述可滚动的祖先元素添加触摸结束事件,所述事件处理函数用于为网页元素添加触摸结束事件,所述触摸结束事件在监听到用户对所述目标元素的触摸操作时触发。
可选地,所述装置还包括:
调整模块,用于在所述可滚动的祖先元素中有一个祖先元素处于滚动状态时,禁止响应所述目标元素对应的触摸事件,同时将所述祖先元素的滚动状态调整为暂停状态。
可选地,所述调整模块包括:
第一获得子模块,用于获得处于滚动状态的祖先元素的触摸结束事件;
阻止模块,用于阻止所述触摸结束事件的传递。
可选地,所述装置还包括:
阻断模块,用于阻断所有可滚动的祖先元素的触摸结束事件对目标触摸操作的监听,所述目标触摸操作为用户对所述目标元素的触摸操作。
可选地,所述获得模块包括:
第二获得子模块,用于获得页面中的所有的垂直向可滚动的元素和横向可滚动的元素,所述垂直向可滚动的元素和所述横向可滚动的元素中包括所述目标元素的可滚动的祖先元素;
标记子模块,用于在所述垂直向可滚动的元素和所述横向可滚动的元素中标记所述目标元素的可滚动的祖先元素。
可选地,所述第二获得子模块包括:
第一确定子模块,用于将页面中的所有内容区高度大于边框高度的元素确定为垂直向可滚动的元素;
第三获得子模块,用于获得所述垂直向可滚动的元素;
第二确定子模块,用于将页面中的所有内容区宽度大于边框宽度的元素确定为横向可滚动的元素;
第四获得子模块,用于获得所述横向可滚动的元素。
可选地,所述装置还包括:
记录模块,用于记录每一个所述可滚动的祖先元素的初始的滚动条位置;
所述响应模块包括:
第三确定子模块,用于在再次检测到用户对所述目标元素的触摸操作时,若所述当前的滚动条位置,与所述初始的滚动条位置相同,确定每一个已标记的可滚动的祖先元素均未处于滚动状态;
第三响应子模块,用于响应所述目标元素对应的触摸事件。
可选地,所述第一响应子模块包括:
第五获得子模块,用于在再次检测到用户对所述目标元素的触摸操作时,响应所述触摸结束事件,按照所述可滚动的祖先元素的级别由高到低的次序,依次获得每一个已标记的可滚动的祖先元素的运动状态。根据本公开实施例的第三方面,提供一种终端,该终端包括:
处理器;
用于存储该处理器可执行指令的存储器;
其中,该处理器被配置为执行以实现如本公开第一方面提供的响应用户操作的方法所执行的操作。
根据本公开实施例的第四方面,提供一种非临时性计算机可读存储介质,当该存储介质中的指令由终端的处理器执行时,使得终端能够执行一种以实现如本公开第一方面提供的响应用户操作的方法所执行的操作。
通过本申请的响应用户操作的方法,在检测到用户对页面中的目标元素的触摸操作时,首先获得该目标元素的所有的可滚动的祖先元素,当再次检测到用户对该目标元素的触摸操作时,判断所有获得的可滚动的祖先元素是否处于滚动状态,如果所有的可滚动的祖先元素均未处于滚动状态,确定响应该目标元素对应的触摸事件。在上述过程中,针对用户的首次触摸操作获得目标元素的所有的可滚动的祖先元素,避免了相关技术中祖先元素的获取不全面时所带来的问题,且在所有的可滚动的祖先元素均未处于滚动状态时,才确定响应目标元素的触摸事件,防止某些层级较高的可滚动的祖先元素处于滚动状态时,依旧误触发目标元素对应的触摸事件的现象,克服了相关技术中Fastclick存在的问题,避免了触摸事件误触发现象给用户造成的困扰,显著改善了用户的使用体验。
应当理解的是,以上的一般描述和后文的细节描述仅是示例性和解释性的,并不能限制本公开。
附图说明
此处此处的附图被并入说明书中并构成本说明书的一部分,示出了符合本公开的实施例,并与说明书一起用于解释本公开的原理。
图1是本申请一实施例示出的一种响应用户操作的方法的流程图;
图2是本申请一实施例示出的一种页面结构示意图;
图3是本申请一实施例示出的一种事件传递方向示意图;
图4是本申请一实施例示出的一种防止触摸事件误触发的过程示意图;
图5是本申请一实施例示出的一种滚动条位置变化示意图;
图6是本申请一实施例示出的一种响应用户操作的装置的结构框图;
图7是本申请一实施例示出的一种终端的结构示意图。
具体实施方式
为了使本领域普通人员更好地理解本公开的技术方案,下面将结合附图,对本公开实施例中的技术方案进行清楚、完整地描述。
需要说明的是,本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反,它们仅是与本公开的一些方面相一致的装置和方法的例子。
受到针对电脑端适配的HTML页面可能在移动设备上打开的影响,目前,移动设备普遍设计了双击放大的功能,允许用户放大指定区域的文字,以更好地在小屏幕上阅读。然而,这种双击功能和普通的单击功能存在一定的冲突(可以将电脑端的点击事件称为click事件,但在移动端触发click事件时,会存在200~300ms的延时,因而可用tap事件代替click事件作为移动端的点击事件),导致浏览器响应用户的操作的延时较长,严重影响了用户的使用体验,而Fastclick(FTLabs开发的一款开源工具)能较好地解决上述延时问题。
然而,基于Fastclick实现的tap事件在被触发时存在至少以下问题:
(1)一是无法全面地判定一个元素是否为可滚动元素。例如,Fastclick只能检测在页面的垂直方向上可滚动的容器,而无法检测在页面的水平方向上可滚动的容器,导致水平方向上可滚动的容器在滚动过程中,在检测到用户的触屏操作后,不仅会停止容器的滚动,还会触发容器内部元素的tap事件。
(2)二是没有对目标元素所有的可滚动祖先元素进行全方位考虑。例如,在检测到用户的触屏操作后,只记录针对目标元素的一个可滚动的祖先元素,而忽略了更上一级的祖先元素的滚动状态,导致目标元素的tap事件误触发。
本申请提供了一种响应用户操作的方法,基于Fastclick技术实现,但克服了Fastclick技术存在的问题,即:可全面地判定一个元素是否为可滚动元素,且对目标元素所有的可滚动祖先元素进行全方位考虑,能有效避免tap事件误触发现象。
图1是本申请一实施例示出的一种响应用户操作的方法的流程图。参照图1,本申请的响应用户操作的方法包括以下步骤:
步骤S11:在检测到用户对页面中的目标元素的触摸操作时,获得所述目标元素的可滚动的祖先元素,所述目标元素的可滚动的祖先元素为所述目标元素的上级元素。
在本申请中,为了便于各个实施例的陈述,响应用户操作的方法的执行主体可以是支持触屏功能的任意终端设备,例如手机,且对终端设备的具体类型不作限制。用户可以通过终端设备浏览网页,在浏览过程中,用户如果触摸了终端设备的显示屏,那么被触摸区域对应的页面元素即为目标元素,例如,用户触摸了页面中的图片X,那么图片X即为此次触摸操作对应的目标元素。其中,目标元素可以是任意类型的页面元素,包括:文字、图片、表格、链接等,本申请对此不作具体限制。
在本实施例中,目标元素可以具有祖先元素,祖先元素为目标元素的上级元素。例如,在一张网页的页面中定义一个块区域1,在这个块区域1中再定义一个图片区域2,接着在图片区域2中定义一个文本框3,那么对于文本框3,其祖先元素至少包括图片区域2和块区域1,当块区域1具有其他祖先元素时,这些祖先元素同样也是文本框3的祖先元素。关于祖先元素的概念可参照相关技术的定义,本实施例在此不作赘述。
在本实施例中,页面元素包括可滚动的元素和不可滚动的元素。判断一个页面元素是否为可滚动的元素可以根据该页面元素的边框高度(clientHeight)与内容区高度(scrollHeight)的大小关系,或者边框宽度(clientWidth)与内容区宽度(scrollWidth)的大小关系。例如,当一个页面元素的边框高度不大于内容区高度时,表示该页面元素为可滚动的元素。关于判断一个页面元素是否为可滚动的元素的具体方法将在后文详细说明。
在步骤S11中,在检测到用户对页面的触摸操作时,首先确定用户的触摸区域,然后获得对应该区域的目标元素,接着获得目标元素的所有的祖先元素,从这些祖先元素中获得可滚动的祖先元素。
步骤S12:在再次检测到用户对所述目标元素的触摸操作时,若每一个已标记的可滚动的祖先元素均未处于滚动状态,响应所述目标元素对应的触摸事件。
在本实施例中,在第一次检测到用户的触摸操作时,获得目标元素的可滚动的祖先元素,暂时不响应目标元素上绑定的tap事件,继续等待用户的再次触摸操作,如果在预设时间段内再次检测到用户对目标元素的触摸操作,则针对所有获得的可滚动的祖先元素,判断其是否处于滚动状态中;如果在预设时间段内没有检测到用户的触摸操作,则将预设时间段外检测到用户的下一次触摸操作重新确定为第一次检测到的用户的触摸操作,然后重复上述处理过程。
在本实施例中,在用户第一次发起触摸操作后,如果没有拖动页面中的滚动条使得页面中展示的内容发生变化,那么可以确定页面中的元素均处于未滚动状态,反之,如果拖动页面中的滚动条使得页面中展示的内容发生了变化,那么可以确定页面中的元素均处于滚动状态。本申请提供了一种判断页面中的元素是否处于滚动状态的具体的方法,将在后文详细说明。
在本实施例中,如果所有的可滚动的祖先元素均未处于滚动状态,表示当前页面未发生任何变化,用户触发的第二次触摸操作是相对于第一次触摸操作,即:用户发起的是针对目标元素的双击操作,因此,应当响应目标元素对应的触摸事件。其中,触摸事件可以理解为tap事件。
示例地,用户A通过手机浏览网站XX,当前手机显示屏显示的是浏览网站XX的页面1中的内容,用户在浏览过程中发现对页面1中的图片1感兴趣,想通过双击操作实现该图片1的放大功能。在用户A针对图片1发起第一次触摸操作时,终端设备将图片1锁定为目标元素,然后搜索获得图片1的所有的可滚动的祖先元素,接着如果在预设时间段内再次接收到用户A针对该图片1发起的第二次触摸操作,则判断这些可滚动的祖先元素当前是否存在有任意一个元素处于滚动状态中,如果不存在,确定用户A针对该图片1发起双击操作,进而响应该双击操作,获得放大后的图片1并显示在显示屏中。
在本实施例中,在检测到用户对页面中的目标元素的触摸操作时,首先获得该目标元素的所有的可滚动的祖先元素,当再次检测到用户对该目标元素的触摸操作时,判断所有获得的可滚动的祖先元素是否处于滚动状态,如果所有的可滚动的祖先元素均未处于滚动状态时,确定响应该目标元素对应的触摸事件。在上述过程中,针对用户的首次触摸操作获得目标元素的所有的可滚动的祖先元素,避免了相关技术中祖先元素的获取不全面时所带来的问题,且在所有的可滚动的祖先元素均未处于滚动状态时,才确定响应目标元素的触摸事件,防止某些层级较高的可滚动的祖先元素处于滚动状态时,依旧误触发目标元素对应的触摸事件的现象,克服了相关技术中Fastclick存在的问题,避免了触摸事件误触发现象给用户造成的困扰,显著改善了用户的使用体验。
结合以上实施例,在一种实施方式中,本申请还提供了一种获得目标元素的可滚动的祖先元素的方法,通过该方法,可全面地获得目标元素的可滚动的祖先元素,避免了由于可滚动的祖先元素的搜索不全面而带来的触摸事件误触发现象。该方法具体可包括以下步骤:
获得页面中的所有的垂直向可滚动的元素和横向可滚动的元素,所述垂直向可滚动的元素和所述横向可滚动的元素中包括所述目标元素的可滚动的祖先元素;
在所述垂直向可滚动的元素和所述横向可滚动的元素中标记所述目标元素的可滚动的祖先元素。
在本实施例中,页面中的元素包括垂直向可滚动的元素,和横向可滚动的元素,同一元素既可以是垂直向可滚动的元素,也可以是横向可滚动的元素。因而在获得目标元素的可滚动的祖先元素时,可以首先获得页面中的所有的垂直向可滚动的元素和横向可滚动的元素,然后再从所获得的所有的垂直向可滚动的元素和横向可滚动的元素中,筛选出目标元素的可滚动的祖先元素,并进行标记。
在本实施例中,也可以首先获得目标元素的所有的祖先元素,然后在这些祖先元素中,筛选出可以在页面中垂直滚动的元素,即垂直向可滚动的元素,和可以在页面中横向滚动的元素,即横向可滚动的元素,然后再将筛选出的这部分元素作为目标元素的可滚动的祖先元素,并进行标记。当然,具体采用何种方式标记目标元素的可滚动的祖先元素可根据实际需求设置,本实施例对此不作具体限制。
在本实施例中,在获得目标元素的可滚动的祖先元素时,不仅考虑了垂直向可滚动的元素,还考虑了横向可滚动的元素,使得获得的可滚动的祖先元素更加全面,进而避免相关技术中存在的误触发现象,改善用户的使用体验。
结合以上实施例,在一种实施方式中,可以采取下述步骤获得获得页面中的垂直向可滚动的元素和横向可滚动的元素:
将页面中的所有内容区高度大于边框高度的元素确定为垂直向可滚动的元素;
获得所述垂直向可滚动的元素;
将页面中的所有内容区宽度大于边框宽度的元素确定为横向可滚动的元素;
获得所述横向可滚动的元素。
在本实施例中,将内容区高度(scrollHeight)大于边框高度(clientHeight)的元素确定为垂直向可滚动的元素;将内容区宽度(scrollWidth)大于边框宽度(clientWidth)的元素确定为横向可滚动的元素。因而,根据上述两条规则,可以判断任意一个元素是否属于垂直向可滚动的元素,或者横向可滚动的元素。图2是本申请一实施例示出的一种页面结构示意图。示例地,在图2中,内容区宽度为1135px,边框高度为300px,内容区高度大于边框高度,因而,方框区域中的内容为可垂直滚动的元素。
在本实施例中,在获得目标元素的可滚动的祖先元素时,不仅考虑了垂直向可滚动的元素,还考虑了横向可滚动的元素,因而使得获得的可滚动的祖先元素更加全面。而相关技术中,由于只考虑垂直向可滚动的元素而忽略横向可滚动的元素,因此无法保证在所有可滚动的祖先元素均未处于滚动状态时才响应目标元素对应的触摸事件,进而导致触摸事件的误触发现象。因而,本申请的响应用户操作的方法能有效地避免相关技术中的触摸事件的误触发现象给用户造成的困扰,改善用户的使用体验。
结合以上实施例,在一种实施方式中,步骤S11具体可以包括:
在检测到用户对页面中的目标元素的触摸操作时,为所述目标元素添加触摸开始事件;
响应所述触摸开始事件,获得所述目标元素的可滚动的祖先元素,并为每一个所述可滚动祖先元素添加触摸结束事件,以标记每一个所述可滚动祖先元素;
相应地,步骤S12可以包括:
在再次检测到用户对所述目标元素的触摸操作时,响应所述触摸结束事件,获得每一个已标记的可滚动的祖先元素的运动状态;
在所述运动状态表示所述每一个已标记的可滚动的祖先元素均未处于滚动状态时,响应所述目标元素对应的触摸事件。
在本实施例中,基于Fastclick技术,在检测到用户对目标元素的触摸操作时,为目标元素添加触摸开始事件,即:touchstart事件(当用户的手指触摸到目标元素的瞬间即触发touchstart事件的添加,类似于桌面浏览器中的mousedown事件);然后执行该触摸开始事件,依次获得目标元素的所有的可滚动的祖先元素,并为每一个可滚动的祖先元素添加触摸结束事件,即:touchend事件,以实现对每一个可滚动祖先元素的标记。
在本实施例中,在检测到用户对目标元素的触摸操作时,即进入捕获阶段。在符合W3C规范的现代浏览器的事件模型中,事件传递分为“捕获阶段”和“冒泡阶段”两种,如图3所示。图3是本申请一实施例示出的一种事件传递方向示意图。在图3中,“捕获阶段”指事件从HTML根元素向下到目标元素的方向传递,即:事件的传递方向依次为HTML、BODY、DIV以及BUTTON(其中,HTML指HyperText Markup Language,超文本标记语言,一个HTML文档与一个网页对应,可用HTML描述一个网页,此处表示整篇HTML文档;body是用在网页中的一种HTML标签,用于定义HTML文档的主体,此处表示整篇HTML文档的主体部分;DIV指DIVision,划分,是用在网页中的一种HTML标签,用于为HTML文档内的大块内容提供结构和背景的元素,此处表示主体部分中的某块区域;BUTTON是HTML文档中的一种元素,用于创建按钮,此处表示某块区域中的一个按钮),“冒泡阶段”指从目标元素向上到HTML根元素的方向传递,即:事件的传递方向依次为BUTTON、DIV、BODY以及HTML,具体可参照相关技术中的描述,本实施例在此不作赘述。在执行触摸开始事件时,终端设备按照从HTML根元素向下到目标元素的方向,首先获得级别最高的可滚动的祖先元素,为其添加触摸结束事件,然后获得级别次之的可滚动的祖先元素,为其添加触摸结束事件,依次地,按照级别由高到低的次序,获得目标元素的所有的可滚动的祖先元素,为其添加触摸结束事件。
在为所有的可滚动的祖先元素添加了触摸结束事件后,等待触摸结束事件的触发。在再次检测到用户对目标元素的触摸操作时,触摸结束事件必然被触发,且触发顺序与添加触摸结束事件的添加顺序相同,即:按照可滚动的祖先元素的级别的高低,依次触发各个可滚动的祖先元素的触摸结束事件。具体地,首先触发级别最高的可滚动的祖先元素的触摸结束事件,执行对应的触摸结束事件,即判断该可滚动的祖先元素是否处于滚动状态,如果没有处于滚动状态,再触发级别次之的可滚动的祖先元素的触摸结束事件,执行对应的触摸结束事件,即判断该可滚动的祖先元素是否处于滚动状态,如果没有处于滚动状态,接着按照相同的原理判断其它的可滚动的祖先元素是否处于滚动状态,如果每一个已标记的可滚动的祖先元素均未处于滚动状态,响应目标元素对应的触摸事件。
本实施例中,针对所有的可滚动的祖先元素均添加有触摸结束事件,在再次检测到用户对目标元素的触摸操作时,通过执行触摸结束事件,可确定所有的可滚动的祖先元素否处于滚动状态,且在所有的可滚动的祖先元素均未处于滚动状态时,才确定响应触摸事件,防止某些层级较高的可滚动的祖先元素处于滚动状态时,依旧误触发目标元素对应的触摸事件的现象,克服了相关技术中Fastclick存在的问题,避免了触摸事件误触发现象给用户造成的困扰,显著改善了用户的使用体验。
结合以上实施例,在一种实施方式中,为每一个所述可滚动祖先元素添加触摸结束事件,包括:
执行所述触摸开始事件中的事件处理函数,以为每一个所述可滚动的祖先元素添加触摸结束事件,所述事件处理函数用于为网页元素添加触摸结束事件,所述触摸结束事件在监听到用户对所述目标元素的触摸操作时触发。
在本实施例中,具体可以采用HTML技术的API方法中的AddEventListener(添加事件监听)来为目标元素添加触摸开始事件。之后,响应触摸开始事件,通过执行其中的事件处理函数,为每一个可滚动的祖先元素添加触摸结束事件,添加过程具体可参照前文所述,在此不作赘述。其中,事件处理函数用于为网页元素添加触摸结束事件,触摸结束事件在监听到用户对所述目标元素的触摸操作时触发。示例地,用户执行双击放大图片X的操作,当用户第一次触摸图片X时,为图片X添加触摸开始事件,之后,执行该触摸开始事件中的事件处理函数,为图片X的每一个可滚动的祖先元素添加触摸结束事件。
本实施例中给出了添加触摸结束事件的具体方式,使得本申请的响应用户操作的方法基于触摸结束事件可顺利实施,进而避免触摸事件误触发现象给用户造成的困扰,改善用户的使用体验。
结合以上实施例,在一种实施方式中,在再次检测到用户对所述目标元素的触摸操作时,响应所述触摸结束事件,获得每一个已标记的可滚动的祖先元素的运动状态,包括:
在再次检测到用户对所述目标元素的触摸操作时,响应所述触摸结束事件,按照所述可滚动的祖先元素的级别由高到低的次序,依次获得每一个已标记的可滚动的祖先元素的运动状态。在本实施例中,可以理解的是,判断所述可滚动的祖先元素是否处于滚动状态,可以包括:按照所述可滚动的祖先元素的级别由高到低的次序,依次判断所述可滚动的祖先元素是否处于滚动状态,且在获得一个处于滚动状态的可滚动的祖先元素后,结束判断。
在本实施例中,由于在捕获阶段是按照级别的高低依次为各个可滚动的祖先元素添加触摸结束事件的,因而,一旦用户再次触发针对目标元素的触摸操作,触摸结束事件必然被触发,即:可滚动的祖先元素会比目标元素更早地监听到用户对目标元素的触摸操作。图4是本申请一实施例示出的一种防止触摸事件误触发的过程示意图。在图4中,目标元素为BUTTON,其祖先元素包括HTML、BODY和DIV,可滚动的祖先元素为DIV(页面中的块元素),当DIV的触摸结束事件监听到用户再次触发针对目标元素的触摸操作时,判断自身正在发生滚动,那么直接阻止触摸结束事件继续向下传递(例如:图4中的叉号表示DIV阻止BUTTON接收到触摸结束事件),使得BUTTON的触摸结束事件无法监听到用户再次触发针对目标元素的触摸操作,进而阻断其触摸事件的触发,通过这种在高层提前阻断目标元素的触摸事件的触发的方式,可有效加快终端设备响应用户操作的速度。
在本实施例中,由于祖先元素通过触摸结束事件会比目标元素更早监听到用户第二次针对目标元素的触摸操作,因此如果有祖先元素判断自身正在发生滚动,可提前阻止目标元素监听到用户第二次针对目标元素的触摸操作,进而有效避免目标元素的触摸事件的误触发现象,同时,加快了终端设备响应用户操作的速度,改善了用户的使用体验。
结合以上实施例,在一种实施方式中,本申请的响应用户操作的方法还可以包括以下步骤:
在所述可滚动的祖先元素中有一个祖先元素处于滚动状态时,禁止响应所述目标元素对应的触摸事件,同时将所述祖先元素的滚动状态调整为暂停状态。
在本申请各个实施例中,当可滚动的祖先元素中有一个祖先元素处于滚动状态时,表示用户想要执行的是暂停滚动操作,而不是执行目标元素的触摸事件,换言之,如果用户需要执行目标元素的触摸事件,首先需要触摸目标元素,实现暂停滚动操作,然后再触摸目标元素,实现目标元素的触摸事件。因此,当多个可滚动的祖先元素中只要有一个祖先元素处于滚动状态时,应当禁止响应目标元素对应的触摸事件,同时将祖先元素的滚动状态调整为暂停状态,以便于用户做出后续的触摸操作。
本实施例中,在确定有一个祖先元素处于滚动状态时,禁止响应目标元素对应的触摸事件,可有效避免触摸事件的误触发现象给用户造成的困扰,进而改善用户的使用体验。
结合以上实施例,在一种实施方式中,禁止响应所述目标元素对应的触摸事件,可以包括以下步骤:
获得处于滚动状态的祖先元素的触摸结束事件;
阻止所述触摸结束事件的传递。
在本实施例中,一旦确定多个可滚动的祖先元素中有一个祖先元素处于滚动状态,立即调用事件对象的StopPropagation(阻止传播)方法,阻止触摸结束事件的进一步向下传递,使得下一级的可滚动的祖先元素无法监听到用户第二次针对目标元素的触摸操作,进而无法在目标元素上构成完整的触摸事件。
本实施例中给出了禁止响应目标元素对应的触摸事件的具体方式,使得本申请的响应用户操作的方法基于该具体方式可顺利实施,进而避免了触摸事件误触发现象给用户造成的困扰,改善了用户的使用体验。
结合以上实施例,在一种实施方式中,在禁止响应所述目标元素对应的触摸事件后,本申请的响应用户操作的方法还可以包括:
阻断所有可滚动的祖先元素的触摸结束事件对目标触摸操作的监听,所述目标触摸操作为用户对所述目标元素的触摸操作。
在本实施例中,触摸结束事件用于监听用户对目标元素的触摸操作,即目标触摸操作,如果要解除触摸结束事件对目标触摸操作的监听,可以采用移除事件监听方法。具体地,当有一个祖先元素的触摸结束事件监听到目标触摸操作,那么应当阻止触摸结束事件继续向下传递,防止下级的可滚动的祖先元素的触摸结束事件监听到目标触摸操作,此时可调用所有可滚动的祖先元素的RemoveEventListener(移除事件监听)方法,来解除对应的触摸结束事件对目标触摸操作的监听,避免触摸事件下次的误触发。
本实施例中通过采用移除事件监听方法,使得本申请的响应用户操作的方法基于该移除事件监听方法可顺利实施,进而避免了触摸事件误触发现象给用户造成的困扰,改善了用户的使用体验。
结合以上实施例,在一种实施方式中,在获得所述目标元素的可滚动的祖先元素之后,所述方法还包括:
记录每一个所述可滚动的祖先元素的初始的滚动条位置;
在再次检测到用户对所述目标元素的触摸操作时,若每一个已标记的可滚动的祖先元素均未处于滚动状态,响应所述目标元素对应的触摸事件,包括:
在再次检测到用户对所述目标元素的触摸操作时,若所述当前的滚动条位置,与所述初始的滚动条位置相同,确定每一个已标记的可滚动的祖先元素均未处于滚动状态;
响应所述目标元素对应的触摸事件。
在本实施例中,判断当前的祖先元素是否正在发生滚动的原理是:获取当前的祖先元素的滚动条位置(ScrollTop,可参照图2所示),与在用户第一次触摸时记录的滚动条位置相比是否发生了变化。一旦某一个祖先元素的滚动条位置发生了变动,可确定该祖先元素正在发生滚动。图5是本申请一实施例示出的一种滚动条位置变化示意图。在图5中,滚动条位置在用户第一次触摸时与在用户第二次触摸时不同,因而可确定对应的祖先元素正在发生滚动。
在本实施例中,如果一个祖先元素既可以垂直向滚动,也可以横向滚动,那么在用户第一次触摸时需要同时记录垂直向的滚动条位置,和横向的滚动条位置;同时,在用户第二次触摸时,首先判断垂直向的滚动条位置是否与第一次触摸时记录的滚动条位置不同,如果不同,确定该祖先元素正在发生垂直向滚动,如果相同,再判断横向的滚动条位置是否与第一次触摸时记录的滚动条位置不同,如果不同,确定该祖先元素正在发生横向滚动。
本实施例中给出了一种判断可滚动的祖先元素是否处于滚动状态的方法,使得本申请的响应用户操作的方法基于该方法,能准确地在所有可滚动的祖先元素中确定处于滚动状态的祖先元素,进而避免了触摸事件误触发现象给用户造成的困扰,改善了用户的使用体验。
通过本申请提供的响应用户操作的方法,一方面能更加全面地判定一个元素是否为可滚动的元素(即:从垂直向和横向两个方面进行考虑),因而对于正在横向滚动的元素和垂直向滚动的元素,都能避免误触发其后代元素的触摸事件;另一方面,对于任意层级的嵌套的可滚动的元素,可以从最上一级正在滚动的祖先元素上实现对触摸事件的误触发的阻断,无需等待目标触摸操作一层一层传递到目标元素上,再判断是否触发触摸事件,可显著缩短响应用户的操作的时间,改善用户的使用体验。
基于同一发明构思,本公开一实施例提供一种响应用户操作的装置600。参考图6,图6是本申请一实施例示出的一种响应用户操作的装置的结构框图。如图6所示,该装置600包括:
获得模块601,用于在检测到用户对页面中的目标元素的触摸操作时,标记所述目标元素的可滚动的祖先元素,所述目标元素的可滚动的祖先元素为所述目标元素的上级元素;
响应模块602,用于在再次检测到用户对所述目标元素的触摸操作时,若每一个已标记的可滚动的祖先元素均未处于滚动状态,响应所述目标元素对应的触摸事件。
可选地,所述获得模块601包括:
第一添加模块,用于在检测到用户对页面中的目标元素的触摸操作时,为所述目标元素添加触摸开始事件;
第二添加模块,用于响应所述触摸开始事件,获得所述目标元素的可滚动的祖先元素,并为每一个所述可滚动祖先元素添加触摸结束事件,以标记每一个所述可滚动祖先元素;
所述响应模块602包括:
第一响应子模块,用于在再次检测到用户对所述目标元素的触摸操作时,响应所述触摸结束事件,获得每一个已标记的可滚动的祖先元素的运动状态;
第二响应子模块,用于在所述运动状态表示所述每一个已标记的可滚动的祖先元素均未处于滚动状态时,响应所述目标元素对应的触摸事件。
可选地,所述第二添加模块包括:
执行模块,用于执行所述触摸开始事件中的事件处理函数,以为每一个所述可滚动的祖先元素添加触摸结束事件,所述事件处理函数用于为网页元素添加触摸结束事件,所述触摸结束事件在监听到用户对所述目标元素的触摸操作时触发。
可选地,所述装置600还包括:
调整模块,用于在所述可滚动的祖先元素中有一个祖先元素处于滚动状态时,禁止响应所述目标元素对应的触摸事件,同时将所述祖先元素的滚动状态调整为暂停状态。
可选地,所述调整模块包括:
第一获得子模块,用于获得处于滚动状态的祖先元素的触摸结束事件;
阻止模块,用于阻止所述触摸结束事件的传递。
可选地,所述装置600还包括:
阻断模块,用于阻断所有可滚动的祖先元素的触摸结束事件对目标触摸操作的监听,所述目标触摸操作为用户对所述目标元素的触摸操作。
可选地,所述获得模块601包括:
第二获得子模块,用于获得页面中的所有的垂直向可滚动的元素和横向可滚动的元素,所述垂直向可滚动的元素和所述横向可滚动的元素中包括所述目标元素的可滚动的祖先元素;
标记子模块,用于在所述垂直向可滚动的元素和所述横向可滚动的元素中标记所述目标元素的可滚动的祖先元素。
可选地,所述第二获得子模块包括:
第一确定子模块,用于将页面中的所有内容区高度大于边框高度的元素确定为垂直向可滚动的元素;
第三获得子模块,用于获得所述垂直向可滚动的元素;
第二确定子模块,用于将页面中的所有内容区宽度大于边框宽度的元素确定为横向可滚动的元素;
第四获得子模块,用于获得所述横向可滚动的元素。
可选地,所述装置600还包括:
记录模块,用于记录每一个所述可滚动的祖先元素的初始的滚动条位置;
所述响应模块602包括:
第三确定子模块,用于在再次检测到用户对所述目标元素的触摸操作时,若所述当前的滚动条位置,与所述初始的滚动条位置相同,确定每一个已标记的可滚动的祖先元素均未处于滚动状态;
第三响应子模块,用于响应所述目标元素对应的触摸事件。
可选地,所述第一响应子模块包括:
第五获得子模块,用于在再次检测到用户对所述目标元素的触摸操作时,响应所述触摸结束事件,按照所述可滚动的祖先元素的级别由高到低的次序,依次获得每一个已标记的可滚动的祖先元素的运动状态。
图7是本申请一实施例示出的一种终端的结构示意图。本申请实施例还提供了一种终端,如图7所示,包括处理器701、通信接口702、存储器703和通信总线704,其中,处理器701,通信接口702,存储器703通过通信总线704完成相互间的通信,
存储器703,用于存放计算机程序;
处理器701,用于执行存储器703上所存放的程序时,实现如下步骤:
在检测到用户对页面中的目标元素的触摸操作时,获得所述目标元素的可滚动的祖先元素;
在再次检测到用户对所述目标元素的触摸操作时,判断所述可滚动的祖先元素是否处于滚动状态;
在每一个所述可滚动的祖先元素均未处于滚动状态时,响应所述目标元素对应的触摸事件。
或者处理器701在执行存储器703上所存放的程序时,实现上述其他方法实施例中的步骤。
上述终端提到的通信总线可以是外设部件互连标准(Peripheral ComponentInterconnect,简称PCI)总线或扩展工业标准结构(Extended Industry StandardArchitecture,简称EISA)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。为便于表示,图中仅用一条粗线表示,但并不表示仅有一根总线或一种类型的总线。
通信接口用于上述终端与其他设备之间的通信。
存储器可以包括随机存取存储器(Random Access Memory,简称RAM),也可以包括非易失性存储器(non-volatile memory),例如至少一个磁盘存储器。可选的,存储器还可以是至少一个位于远离前述处理器的存储装置。
上述的处理器可以是通用处理器,包括中央处理器(Central Processing Unit,简称CPU)、网络处理器(Network Processor,简称NP)等;还可以是数字信号处理器(Digital Signal Processing,简称DSP)、专用集成电路(Application SpecificIntegrated Circuit,简称ASIC)、现场可编程门阵列(Field-Programmable Gate Array,简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
在本发明提供的又一实施例中,还提供了一种计算机可读存储介质,该计算机可读存储介质中存储有指令,当其在计算机上运行时,使得计算机执行上述实施例中任一所述的响应用户操作的方法中的步骤。
对于装置实施例而言,由于其与方法实施例基本相似,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。
本说明书中的各个实施例均采用递进的方式描述,每个实施例重点说明的都是与其他实施例的不同之处,各个实施例之间相同相似的部分互相参见即可。
本领域内的技术人员应明白,本发明实施例的实施例可提供为方法、装置、或计算机程序产品。因此,本发明实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本发明实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本发明实施例是参照根据本发明实施例的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上,使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
尽管已描述了本发明实施例的优选实施例,但本领域内的技术人员一旦得知了基本创造性概念,则可对这些实施例做出另外的变更和修改。所以,所附权利要求意欲解释为包括优选实施例以及落入本发明实施例范围的所有变更和修改。
最后,还需要说明的是,在本文中,诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。
以上对本发明所提供的一种响应用户操作的方法、装置、终端及存储介质,进行了详细介绍,本文中应用了具体个例对本发明的原理及实施方式进行了阐述,以上实施例的说明只是用于帮助理解本发明的方法及其核心思想;同时,对于本领域的一般技术人员,依据本发明的思想,在具体实施方式及应用范围上均会有改变之处,综上所述,本说明书内容不应理解为对本发明的限制。
Claims (22)
1.一种响应用户操作的方法,其特征在于,所述方法包括:
在检测到用户对页面中的目标元素的触摸操作时,标记所述目标元素的所有可滚动的祖先元素,所述目标元素的可滚动的祖先元素为所述目标元素的上级元素;
在预设时间段内,在再次检测到用户对所述目标元素的触摸操作时,若每一个已标记的可滚动的祖先元素均未处于滚动状态,响应所述目标元素对应的触摸事件,若在所述预设时间段内未检测到用户对所述目标元素的触摸操作,将所述预设时间段外检测到的用户的下一次触摸操作重新确定为第一次检测到的用户的触摸操作。
2.根据权利要求1所述的方法,其特征在于,在检测到用户对页面中的目标元素的触摸操作时,标记所述目标元素的所有可滚动的祖先元素,包括:
在检测到用户对页面中的目标元素的触摸操作时,为所述目标元素添加触摸开始事件;
响应所述触摸开始事件,获得所述目标元素的所有可滚动的祖先元素,并为每一个所述可滚动的祖先元素添加触摸结束事件,以标记每一个所述可滚动的祖先元素;
在再次检测到用户对所述目标元素的触摸操作时,若每一个所述可滚动的祖先元素均未处于滚动状态,响应所述目标元素对应的触摸事件,包括:
在再次检测到用户对所述目标元素的触摸操作时,响应所述触摸结束事件,获得每一个已标记的可滚动的祖先元素的运动状态;
在所述运动状态表示所述每一个已标记的可滚动的祖先元素均未处于滚动状态时,响应所述目标元素对应的触摸事件。
3.根据权利要求2所述的方法,其特征在于,为每一个所述可滚动的祖先元素添加触摸结束事件,包括:
执行所述触摸开始事件中的事件处理函数,以为每一个所述可滚动的祖先元素添加触摸结束事件,所述事件处理函数用于为网页元素添加触摸结束事件,所述触摸结束事件在监听到用户对所述目标元素的触摸操作时触发。
4.根据权利要求2所述的方法,其特征在于,所述方法还包括:
在所述可滚动的祖先元素中有一个祖先元素处于滚动状态时,禁止响应所述目标元素对应的触摸事件,同时将所述祖先元素的滚动状态调整为暂停状态。
5.根据权利要求4所述的方法,其特征在于,禁止响应所述目标元素对应的触摸事件,包括:
获得处于滚动状态的祖先元素的触摸结束事件;
阻止所述触摸结束事件的传递。
6.根据权利要求4所述的方法,其特征在于,在禁止响应所述目标元素对应的触摸事件后,所述方法还包括:
阻断所有可滚动的祖先元素的触摸结束事件对目标触摸操作的监听,所述目标触摸操作为用户对所述目标元素的触摸操作。
7.根据权利要求1所述的方法,其特征在于,标记所述目标元素的所有可滚动的祖先元素,包括:
获得页面中的所有的垂直向可滚动的元素和横向可滚动的元素,所述垂直向可滚动的元素和所述横向可滚动的元素中包括所述目标元素的可滚动的祖先元素;
在所述垂直向可滚动的元素和所述横向可滚动的元素中标记所述目标元素的所有可滚动的祖先元素。
8.根据权利要求7所述的方法,其特征在于,获得页面中的所有的垂直向可滚动的元素和横向可滚动的元素,包括:
将页面中的所有内容区高度大于边框高度的元素确定为垂直向可滚动的元素;
获得所述垂直向可滚动的元素;
将页面中的所有内容区宽度大于边框宽度的元素确定为横向可滚动的元素;
获得所述横向可滚动的元素。
9.根据权利要求1所述的方法,其特征在于,在获得所述目标元素的所有可滚动的祖先元素之后,所述方法还包括:
记录每一个所述可滚动的祖先元素的初始的滚动条位置;
在再次检测到用户对所述目标元素的触摸操作时,若每一个已标记的可滚动的祖先元素均未处于滚动状态,响应所述目标元素对应的触摸事件,包括:
在再次检测到用户对所述目标元素的触摸操作时,若当前的滚动条位置,与所述初始的滚动条位置相同,确定每一个已标记的可滚动的祖先元素均未处于滚动状态;
响应所述目标元素对应的触摸事件。
10.根据权利要求2所述的方法,其特征在于,在再次检测到用户对所述目标元素的触摸操作时,响应所述触摸结束事件,获得每一个已标记的可滚动的祖先元素的运动状态,包括:
在再次检测到用户对所述目标元素的触摸操作时,响应所述触摸结束事件,按照所述可滚动的祖先元素的级别由高到低的次序,依次获得每一个已标记的可滚动的祖先元素的运动状态。
11.一种响应用户操作的装置,其特征在于,所述装置包括:
获得模块,用于在检测到用户对页面中的目标元素的触摸操作时,标记所述目标元素的所有可滚动的祖先元素,所述目标元素的可滚动的祖先元素为所述目标元素的上级元素;
响应模块,用于在预设时间段内,在再次检测到用户对所述目标元素的触摸操作时,若每一个已标记的可滚动的祖先元素均未处于滚动状态,响应所述目标元素对应的触摸事件,若在所述预设时间段内未检测到用户对所述目标元素的触摸操作,将所述预设时间段外检测到的用户的下一次触摸操作重新确定为第一次检测到的用户的触摸操作。
12.根据权利要求11所述的装置,其特征在于,所述获得模块包括:
第一添加模块,用于在检测到用户对页面中的目标元素的触摸操作时,为所述目标元素添加触摸开始事件;
第二添加模块,用于响应所述触摸开始事件,获得所述目标元素的所有可滚动的祖先元素,并为每一个所述可滚动的祖先元素添加触摸结束事件,以标记每一个所述可滚动的祖先元素;
所述响应模块包括:
第一响应子模块,用于在再次检测到用户对所述目标元素的触摸操作时,响应所述触摸结束事件,获得每一个已标记的可滚动的祖先元素的运动状态;
第二响应子模块,用于在所述运动状态表示所述每一个已标记的可滚动的祖先元素均未处于滚动状态时,响应所述目标元素对应的触摸事件。
13.根据权利要求12所述的装置,其特征在于,所述第二添加模块包括:
执行模块,用于执行所述触摸开始事件中的事件处理函数,以为每一个所述可滚动的祖先元素添加触摸结束事件,所述事件处理函数用于为网页元素添加触摸结束事件,所述触摸结束事件在监听到用户对所述目标元素的触摸操作时触发。
14.根据权利要求12所述的装置,其特征在于,所述装置还包括:
调整模块,用于在所述可滚动的祖先元素中有一个祖先元素处于滚动状态时,禁止响应所述目标元素对应的触摸事件,同时将所述祖先元素的滚动状态调整为暂停状态。
15.根据权利要求14所述的装置,其特征在于,所述调整模块包括:
第一获得子模块,用于获得处于滚动状态的祖先元素的触摸结束事件;
阻止模块,用于阻止所述触摸结束事件的传递。
16.根据权利要求14所述的装置,其特征在于,所述装置还包括:
阻断模块,用于阻断所有可滚动的祖先元素的触摸结束事件对目标触摸操作的监听,所述目标触摸操作为用户对所述目标元素的触摸操作。
17.根据权利要求11所述的装置,其特征在于,所述获得模块包括:
第二获得子模块,用于获得页面中的所有的垂直向可滚动的元素和横向可滚动的元素,所述垂直向可滚动的元素和所述横向可滚动的元素中包括所述目标元素的可滚动的祖先元素;
标记子模块,用于在所述垂直向可滚动的元素和所述横向可滚动的元素中标记所述目标元素的所有可滚动的祖先元素。
18.根据权利要求17所述的装置,其特征在于,所述第二获得子模块包括:
第一确定子模块,用于将页面中的所有内容区高度大于边框高度的元素确定为垂直向可滚动的元素;
第三获得子模块,用于获得所述垂直向可滚动的元素;
第二确定子模块,用于将页面中的所有内容区宽度大于边框宽度的元素确定为横向可滚动的元素;
第四获得子模块,用于获得所述横向可滚动的元素。
19.根据权利要求11所述的装置,其特征在于,所述装置还包括:
记录模块,用于记录每一个所述可滚动的祖先元素的初始的滚动条位置;
所述响应模块包括:
第三确定子模块,用于在再次检测到用户对所述目标元素的触摸操作时,若当前的滚动条位置,与所述初始的滚动条位置相同,确定每一个已标记的可滚动的祖先元素均未处于滚动状态;
第三响应子模块,用于响应所述目标元素对应的触摸事件。
20.根据权利要求12所述的装置,其特征在于,所述第一响应子模块包括:
第五获得子模块,用于在再次检测到用户对所述目标元素的触摸操作时,响应所述触摸结束事件,按照所述可滚动的祖先元素的级别由高到低的次序,依次获得每一个已标记的可滚动的祖先元素的运动状态。
21.一种终端,其特征在于,包括:
处理器;
用于存储所述处理器可执行指令的存储器;
其中,所述处理器被配置为执行以实现如权利要求1至10中任一项所述的响应用户操作的方法所执行的操作。
22.一种非临时性计算机可读存储介质,当所述存储介质中的指令由终端的处理器执行时,使得终端能够执行一种以实现如权利要求1至10中任一项所述的响应用户操作的方法所执行的操作。
Priority Applications (4)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010438336.1A CN111782122B (zh) | 2020-05-21 | 2020-05-21 | 一种响应用户操作的方法、装置、终端及存储介质 |
PCT/CN2020/135396 WO2021232760A1 (zh) | 2020-05-21 | 2020-12-10 | 一种响应用户操作的方法及装置 |
EP20936329.0A EP4155890A1 (en) | 2020-05-21 | 2020-12-10 | Method and device for responding to user operation |
US17/652,447 US20220179532A1 (en) | 2020-05-21 | 2022-02-24 | Method and device for responding to user operation |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010438336.1A CN111782122B (zh) | 2020-05-21 | 2020-05-21 | 一种响应用户操作的方法、装置、终端及存储介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN111782122A CN111782122A (zh) | 2020-10-16 |
CN111782122B true CN111782122B (zh) | 2021-09-10 |
Family
ID=72754292
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202010438336.1A Active CN111782122B (zh) | 2020-05-21 | 2020-05-21 | 一种响应用户操作的方法、装置、终端及存储介质 |
Country Status (4)
Country | Link |
---|---|
US (1) | US20220179532A1 (zh) |
EP (1) | EP4155890A1 (zh) |
CN (1) | CN111782122B (zh) |
WO (1) | WO2021232760A1 (zh) |
Families Citing this family (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111782122B (zh) * | 2020-05-21 | 2021-09-10 | 北京达佳互联信息技术有限公司 | 一种响应用户操作的方法、装置、终端及存储介质 |
CN115660098A (zh) * | 2022-10-27 | 2023-01-31 | 山东云海国创云计算装备产业创新中心有限公司 | 一种触屏拖拽量子门的实现方法、装置、设备及介质 |
Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101533329A (zh) * | 2008-03-10 | 2009-09-16 | 中兴通讯股份有限公司 | 具备自动执行操作功能的终端设备及执行用户操作的方法 |
CN111061415A (zh) * | 2019-12-09 | 2020-04-24 | 海南车智易通信息技术有限公司 | 一种页面处理方法及计算设备 |
Family Cites Families (23)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US7444399B2 (en) * | 2000-03-17 | 2008-10-28 | Schlucktronix Llc | Methods and devices for recording changes in visual stimuli observed through browser-based interfaces |
AU2001263341A1 (en) * | 2000-05-22 | 2001-12-03 | Sap Portals Inc. | Snippet selection |
US6707449B2 (en) * | 2000-08-30 | 2004-03-16 | Microsoft Corporation | Manual controlled scrolling |
US20060129933A1 (en) * | 2000-12-19 | 2006-06-15 | Sparkpoint Software, Inc. | System and method for multimedia authoring and playback |
US20090109243A1 (en) * | 2007-10-25 | 2009-04-30 | Nokia Corporation | Apparatus and method for zooming objects on a display |
US8717305B2 (en) * | 2008-03-04 | 2014-05-06 | Apple Inc. | Touch event model for web pages |
US20100146459A1 (en) * | 2008-12-08 | 2010-06-10 | Mikko Repka | Apparatus and Method for Influencing Application Window Functionality Based on Characteristics of Touch Initiated User Interface Manipulations |
KR101662726B1 (ko) * | 2010-12-29 | 2016-10-14 | 삼성전자주식회사 | 전자 기기의 스크롤 방법 및 장치 |
US9134899B2 (en) * | 2011-03-14 | 2015-09-15 | Microsoft Technology Licensing, Llc | Touch gesture indicating a scroll on a touch-sensitive display in a single direction |
US9755995B2 (en) * | 2012-11-20 | 2017-09-05 | Dropbox, Inc. | System and method for applying gesture input to digital content |
CN104423853A (zh) * | 2013-08-22 | 2015-03-18 | 中兴通讯股份有限公司 | 一种对象切换方法、装置以及触摸屏终端 |
EP3043253A1 (en) * | 2015-01-07 | 2016-07-13 | Doro AB | A mobile communication terminal providing adaptive sensitivity of a click event |
CN106155524A (zh) * | 2015-03-23 | 2016-11-23 | 阿里巴巴集团控股有限公司 | 页面控制方法及装置 |
CN105892871B (zh) * | 2016-03-31 | 2018-03-20 | 维沃移动通信有限公司 | 一种滚动页面的方法和电子设备 |
CN106598406A (zh) * | 2016-11-16 | 2017-04-26 | 上海斐讯数据通信技术有限公司 | 一种基于智能终端的页面显示方法及智能终端 |
EP3447623B1 (en) * | 2017-08-22 | 2020-01-29 | Samsung Electronics Co., Ltd. | Electronic device and control method thereof |
CN108388393B (zh) * | 2018-01-02 | 2020-08-28 | 阿里巴巴集团控股有限公司 | 移动终端点击事件的识别方法和装置 |
CN108958612B (zh) * | 2018-06-14 | 2021-03-26 | 北京字节跳动网络技术有限公司 | 控制页面滑动的方法、控制页面方法、系统、终端设备及介质 |
CN109164968A (zh) * | 2018-06-15 | 2019-01-08 | 浙江口碑网络技术有限公司 | 基于列表的交互方法以及装置 |
CN109491746A (zh) * | 2018-11-07 | 2019-03-19 | 沈文策 | 一种触屏终端点透解决方法、装置、触屏终端及存储介质 |
CN110275639B (zh) * | 2019-06-26 | 2023-03-28 | Oppo广东移动通信有限公司 | 触摸数据处理方法、装置、终端及存储介质 |
CN110413362A (zh) * | 2019-07-24 | 2019-11-05 | 上海易点时空网络有限公司 | 用于移动端的滚动组件处理方法以及装置 |
CN111782122B (zh) * | 2020-05-21 | 2021-09-10 | 北京达佳互联信息技术有限公司 | 一种响应用户操作的方法、装置、终端及存储介质 |
-
2020
- 2020-05-21 CN CN202010438336.1A patent/CN111782122B/zh active Active
- 2020-12-10 WO PCT/CN2020/135396 patent/WO2021232760A1/zh unknown
- 2020-12-10 EP EP20936329.0A patent/EP4155890A1/en active Pending
-
2022
- 2022-02-24 US US17/652,447 patent/US20220179532A1/en not_active Abandoned
Patent Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101533329A (zh) * | 2008-03-10 | 2009-09-16 | 中兴通讯股份有限公司 | 具备自动执行操作功能的终端设备及执行用户操作的方法 |
CN111061415A (zh) * | 2019-12-09 | 2020-04-24 | 海南车智易通信息技术有限公司 | 一种页面处理方法及计算设备 |
Also Published As
Publication number | Publication date |
---|---|
WO2021232760A1 (zh) | 2021-11-25 |
CN111782122A (zh) | 2020-10-16 |
EP4155890A1 (en) | 2023-03-29 |
US20220179532A1 (en) | 2022-06-09 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US10296175B2 (en) | Visual presentation of multiple internet pages | |
CN105786352B (zh) | 快速定位页面内容的方法、装置及移动终端 | |
US9756140B2 (en) | Tracking user behavior relative to a network page | |
CN105893602B (zh) | 用于终端浏览器的网页中图表的全屏显示方法及系统 | |
KR101721535B1 (ko) | 팝업 표시 방법 및 장치 | |
US10402078B2 (en) | Method and apparatus for interactive movement of displayed content | |
TWI611338B (zh) | 縮放螢幕畫面的方法、電子裝置及電腦程式產品 | |
CN106097072B (zh) | 一种商品信息的对比方法、装置与终端设备 | |
CN111782122B (zh) | 一种响应用户操作的方法、装置、终端及存储介质 | |
US11537284B2 (en) | Method for scrolling visual page content and system for scrolling visual page content | |
KR20150121646A (ko) | 페이지 뒤로가기 제어방법, 장치, 프로그램 및 기록매체 | |
WO2014067442A1 (en) | Page browsing method and browser | |
CN109240591B (zh) | 一种界面显示方法及装置 | |
CN103870187A (zh) | 控制具有触控屏的终端的方法及终端 | |
JP4898485B2 (ja) | ユーザインタフェース内でナビゲートする方法、およびコンピュータ・プログラム | |
CN113032073A (zh) | 一种基于操作行为的页面展示方法和装置 | |
CN106201185B (zh) | 一种浏览器中输入框的定位方法、装置及移动设备 | |
US20140129927A1 (en) | Page browsing method and browser | |
JP2015022382A (ja) | ウェブページ表示装置および方法 | |
CN112987992B (zh) | 一种导航元素展示方法、装置及电子设备 | |
KR101294458B1 (ko) | 모바일 디바이스에서의 텍스트 입력장치 및 그 방법 | |
WO2017181619A1 (zh) | 页面响应方法及装置 | |
CN112749528B (zh) | 文本处理方法、装置、电子设备及计算机可读存储介质 | |
CN110688185B (zh) | 一种页面显示方法、装置及电子设备 | |
CN111580662A (zh) | 一种视图滚动的控制方法、装置、电子设备及存储介质 |
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 |