CN103365859A - 处理网页鼠标点击事件的方法 - Google Patents
处理网页鼠标点击事件的方法 Download PDFInfo
- Publication number
- CN103365859A CN103365859A CN201210086104XA CN201210086104A CN103365859A CN 103365859 A CN103365859 A CN 103365859A CN 201210086104X A CN201210086104X A CN 201210086104XA CN 201210086104 A CN201210086104 A CN 201210086104A CN 103365859 A CN103365859 A CN 103365859A
- Authority
- CN
- China
- Prior art keywords
- node
- event
- processing module
- dom
- events
- 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
Links
- 238000012545 processing Methods 0.000 title claims abstract description 107
- 238000000034 method Methods 0.000 title claims abstract description 80
- 230000008569 process Effects 0.000 claims abstract description 50
- 230000005587 bubbling Effects 0.000 claims abstract description 9
- 238000012544 monitoring process Methods 0.000 claims abstract description 9
- 230000007246 mechanism Effects 0.000 claims abstract description 6
- 230000009471 action Effects 0.000 claims description 17
- 238000004891 communication Methods 0.000 claims description 3
- 230000027455 binding Effects 0.000 description 6
- 238000009739 binding Methods 0.000 description 6
- 230000008859 change Effects 0.000 description 2
- 230000008878 coupling Effects 0.000 description 2
- 238000010168 coupling process Methods 0.000 description 2
- 238000005859 coupling reaction Methods 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 238000013459 approach Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 238000010561 standard procedure Methods 0.000 description 1
Images
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
本发明公开了一种处理网页鼠标点击事件的方法，其中，包括服务端和客户端，客户端通过通讯媒介与服务端连接，具体包括如下步骤；步骤a、服务端向客户端传送数据信号；步骤b、客户端将步骤a中收到的信号组合成带有树形结构的DOM节点的超文本文件，超文本文件包括与树形结构的根节点相连接的根节点事件监听模块和与根节点事件监听模块相连接的根节点事件处理模块，根节点事件处理模块用于处理部分用户操作对应的事件；步骤c、客户端以基于超文本协议并以冒泡机制处理DOM事件流的浏览器解释并显示超文本文件并接受用户操作。
Description
技术领域
本发明涉及一种WEB客户端互动方法，尤其是一种处理网页鼠标点击事件的方法。
背景技术
随着互联网络技术的不断发展，网络的普及程度越来越高，而网站作为互联网的主要内容供应者也得到了长足的发展。网站不再满足于仅仅提供统一制式的内容而是希望能更多的与用户互动进而可以实现按用户的需求提供内容服务。
通常，现有的网站一般通过捕获并处理用户对页面的操作事件实现与用户的互动，较为流行的做法是采用HTML超文本中对DOM节点的事件绑定，HTML DOM 定义了访问和操作HTML文档的标准方法， HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构，在这种DOM树结构中，当需要频繁处理页面中大量DOM 节点的自定义事件处理时，常用的做法是通过脚本筛选出需要绑定事件的DOM节点，并通过循环的方式为每个节点绑定事件处理功能模块，当被绑定的DOM节点元素被浏览器重新渲染加载时，需要再次为其做绑定操作；另一种方法是，通过定义每个DOM节点的属性，为节点指定事件处理功能模块，此种做法虽然能够改善循环引起的性能损耗和重新渲染引起的重新绑定，但增加了页面元素与处理逻辑的耦合性，为程序的扩展和需求变更带来麻烦。
发明内容
针对现有的DOM事件处理方式存在的上述问题，本发明提供一种利用DOM事件冒泡机制处理网页鼠标点击事件的方法。
本发明解决技术问题所采用的技术方案为：
处理网页鼠标点击事件的方法，其中，包括服务端和客户端，所述客户端通过通讯媒介与所述服务端连接，具体包括如下步骤；
步骤a、所述服务端向所述客户端传送数据信号；
步骤b、所述客户端将步骤a中收到的信号组合成带有树形结构的DOM节点的超文本文件，所述超文本文件包括与所述树形结构的根节点相连接的根节点事件监听模块和与所述根节点事件监听模块相连接的根节点事件处理模块，所述根节点事件处理模块用于处理部分用户操作对应的事件；
步骤c、所述客户端以基于超文本协议并以冒泡机制处理DOM事件流的浏览器解释并显示所述超文本文件并接受用户操作；
步骤d、所述根节点事件监听模块判断所述用户操作对应的事件目标节点是否在所述根节点事件处理模块的处理范围内，并将在所述根节点事件处理模块处理范围内的事件发送至所述根节点事件处理模块进行处理并退出；
步骤e、如所述用户操作对应的事件目标节点不在所述根节点事件处理模块的处理范围内则找到所述目标节点，并检查所述目标节点是否存在对应的节点事件处理模块，如存在则将所述用户操作对应的事件发送至所述目标节点对应的节点事件处理模块进行处理并退出。
上述处理网页鼠标点击事件的方法，其中，于所述步骤e执行完毕后如所述目标节点不存在对应的节点事件处理模块，则于所述树形结构上查找所述目标节点的父节点，并检查所述目标节的父节点是否存在对应的节点事件处理模块，如存在且所述用户操作对应的事件在所述目标节点的父节点对应的节点事件处理模块的处理范围内则将所述用户操作对应的事件发送至所述目标节点的父节点对应的节点事件处理模块进行处理并退出。
上述处理网页鼠标点击事件的方法，其中，如所述目标节点的父节点不存在对应的节点事件处理模块或者所述用户操作对应的事件不在所述目标节点的父节点所对应的节点事件处理模块的处理范围，则于所述树形结构上查找所述目标节点的父节点的父节点，并检查所述目标节的父节点的父节点是否存在对应的节点事件处理模块，如存在且所述用户操作对应的事件在所述目标节点的父节点的父节点对应的节点事件处理模块的处理范围内则将所述用户操作对应的事件发送至所述目标节点的父结点的父结点对应的节点事件处理模块进行处理并退出。
上述处理网页鼠标点击事件的方法，其中，所述超文本文件中的部分DOM节点包括与该DOM相连接的节点事件处理模块，所述包含节点事件处理模块的DOM节点对应的节点事件处理模块用于处理以对应的DOM节点为目标节点和/或以对应的DOM节点的子节点为目标节点和/或以对应的DOM节点的子节点的子节点为目标节点的事件。
上述处理网页鼠标点击事件的方法，其中，所述超文本文件中的部分DOM节点包括与该DOM节点以及该节点的父节点相连接的节点事件监听模块和与所述结点事件监听模块相连接并与该DOM节点对应的节点事件处理模块；
所述节点事件监听模块用于监听以对应的DOM节点为目标节点的事件并判断所述事件是否在与该目标节点对应的节点事件处理模块的处理范围内，将处于目标节点对应的节点事件处理模块处理范围内的事件传送至所述目标节点对应的节点事件处理模块处理并终止事件继续冒泡。
上述处理网页鼠标点击事件的方法，其中，所述浏览器为IE。
上述处理网页鼠标点击事件的方法，其中，所述根节点事件监听模块以及根节点事件处理模块主要由嵌入所述超文本文件的脚本形成。
上述处理网页鼠标点击事件的方法，其中，所述节点事件处理模块主要由嵌入所述超文本文件的脚本形成。
上述处理网页鼠标点击事件的方法，其中，所述节点事件监听模块以及节点事件处理模块主要由嵌入所述超文本文件的脚本形成。
本发明的有益效果是：
在根节点统一拦截DOM事件，一次统一拦截事件发起目标元素，提高了时间处理的效率，时间处理模块统一部署于根节点，重新渲染根节点内元素无需重新绑定事件，降低了页面元素与事件处理逻辑的耦合性，为扩展和需求变更带来便利。
附图说明
图1是本发明一种处理网页鼠标点击事件的方法的流程框图；
图2是本发明一种处理网页鼠标点击事件的方法的模块结构图。
具体实施方式
下面结合附图和具体实施例对本发明作进一步说明，但不作为本发明的限定。
如图2所示，本发明处理网页鼠标点击事件的方法，其中，包括服务端和客户端，客户端通过通讯媒介与服务端连接，如图1所示具体包括如下步骤；
步骤a、服务端向客户端传送数据信号；
步骤b、客户端将步骤a中收到的信号组合成带有树形结构的DOM节点的超文本文件，超文本文件包括与树形结构的根节点相连接的根节点事件监听模块和与根节点事件监听模块相连接的根节点事件处理模块，根节点事件处理模块用于处理部分用户操作对应的事件；
步骤c、客户端以基于超文本协议并以冒泡机制处理DOM事件流的浏览器解释并显示超文本文件并接受用户操作；
步骤d、根节点事件监听模块判断用户操作对应的事件目标节点是否在根节点事件处理模块的处理范围内，并将在根节点事件处理模块处理范围内的事件发送至根节点事件处理模块进行处理并退出；
步骤e、如用户操作对应的事件目标节点不在根节点事件处理模块的处理范围内则找到目标节点，并检查目标节点是否存在对应的节点事件处理模块，如存在则将用户操作对应的事件发送至目标节点对应的节点事件处理模块进行处理并退出。
进一步的，其中，于步骤e执行完毕后如目标节点不存在对应的节点事件处理模块，则于树形结构上查找目标节点的父节点，并检查目标节的父节点是否存在对应的节点事件处理模块，如存在且用户操作对应的事件在目标节点的父节点对应的节点事件处理模块的处理范围内则将用户操作对应的事件发送至目标节点的父节点对应的节点事件处理模块进行处理并退出。如目标节点的父节点不存在对应的节点事件处理模块或者用户操作对应的事件不在目标节点的父节点所对应的节点事件处理模块的处理范围，则于树形结构上查找目标节点的父节点的父节点，并检查目标节的父节点的父节点是否存在对应的节点事件处理模块，如存在且用户操作对应的事件在目标节点的父节点的父节点对应的节点事件处理模块的处理范围内则将用户操作对应的事件发送至目标节点的父结点的父结点对应的节点事件处理模块进行处理并退出。
进一步的，其中，超文本文件中的部分DOM节点包括与该DOM相连接的节点事件处理模块，包含节点事件处理模块的DOM节点对应的节点事件处理模块用于处理以对应的DOM节点为目标节点和/或以对应的DOM节点的子节点为目标节点和/或以对应的DOM节点的子节点的子节点为目标节点的事件。或者超文本文件中的部分DOM节点包括与该DOM节点以及该节点的父节点相连接的节点事件监听模块和与结点事件监听模块相连接并与该DOM节点对应的节点事件处理模块；节点事件监听模块用于监听以对应的DOM节点为目标节点的事件并判断事件是否在与该目标节点对应的节点事件处理模块的处理范围内，将处于目标节点对应的节点事件处理模块处理范围内的事件传送至目标节点对应的节点事件处理模块处理并终止事件继续冒泡。
进一步的，其中，浏览器可以是IE或者其他支持DOM事件冒泡机制的浏览器如Firefox、Opera和Safari等。
进一步的，其中，根节点事件监听模块、根节点事件处理模块、节点事件监听模块以及节点事件处理模块主要由嵌入超文本文件的脚本形成，脚本可以是JavaScript脚本或者VBScript脚本。或者也可以由脚本和服务端功能模块共同形成根节点事件监听模块、根节点事件处理模块、节点事件监听模块以及节点事件处理模块，这取决于实际的功能需要。
以上所述仅为本发明较佳的实施例，并非因此限制本发明的申请专利范围，所以凡运用本发明说明书及图示内容所作出的等效结构变化以及本领域技术人员惯用的手段替换，均包含在本发明的保护范围内。
Claims (9)
1.处理网页鼠标点击事件的方法，其特征在于，包括服务端和客户端，所述客户端通过通讯媒介与所述服务端连接，具体包括如下步骤；
步骤a、所述服务端向所述客户端传送数据信号；
步骤b、所述客户端将步骤a中收到的信号组合成带有树形结构的DOM节点的超文本文件，所述超文本文件包括与所述树形结构的根节点相连接的根节点事件监听模块和与所述根节点事件监听模块相连接的根节点事件处理模块，所述根节点事件处理模块用于处理部分用户操作对应的事件；
步骤c、所述客户端以基于超文本协议并以冒泡机制处理DOM事件流的浏览器解释并显示所述超文本文件并接受用户操作；
步骤d、所述根节点事件监听模块判断所述用户操作对应的事件目标节点是否在所述根节点事件处理模块的处理范围内，并将在所述根节点事件处理模块处理范围内的事件发送至所述根节点事件处理模块进行处理并退出；
步骤e、如所述用户操作对应的事件目标节点不在所述根节点事件处理模块的处理范围内则找到所述目标节点，并检查所述目标节点是否存在对应的节点事件处理模块，如存在则将所述用户操作对应的事件发送至所述目标节点对应的节点事件处理模块进行处理并退出。
2.如权利要求1所述处理网页鼠标点击事件的方法，其特征在于，于所述步骤e执行完毕后如所述目标节点不存在对应的节点事件处理模块，则于所述树形结构上查找所述目标节点的父节点，并检查所述目标节的父节点是否存在对应的节点事件处理模块，如存在且所述用户操作对应的事件在所述目标节点的父节点对应的节点事件处理模块的处理范围内则将所述用户操作对应的事件发送至所述目标节点的父节点对应的节点事件处理模块进行处理并退出。
3.如权利要求2所述处理网页鼠标点击事件的方法，其特征在于，如所述目标节点的父节点不存在对应的节点事件处理模块或者所述用户操作对应的事件不在所述目标节点的父节点所对应的节点事件处理模块的处理范围，则于所述树形结构上查找所述目标节点的父节点的父节点，并检查所述目标节的父节点的父节点是否存在对应的节点事件处理模块，如存在且所述用户操作对应的事件在所述目标节点的父节点的父节点对应的节点事件处理模块的处理范围内则将所述用户操作对应的事件发送至所述目标节点的父结点的父结点对应的节点事件处理模块进行处理并退出。
4.如权利要求1-3中任一所述处理网页鼠标点击事件的方法，其特征在于，所述超文本文件中的部分DOM节点包括与该DOM相连接的节点事件处理模块，所述包含节点事件处理模块的DOM节点对应的节点事件处理模块用于处理以对应的DOM节点为目标节点和/或以对应的DOM节点的子节点为目标节点和/或以对应的DOM节点的子节点的子节点为目标节点的事件。
5.如权利要求1-3中任一所述处理网页鼠标点击事件的方法，其特征在于，所述超文本文件中的部分DOM节点包括与该DOM节点以及该节点的父节点相连接的节点事件监听模块和与所述结点事件监听模块相连接并与该DOM节点对应的节点事件处理模块；
所述节点事件监听模块用于监听以对应的DOM节点为目标节点的事件并判断所述事件是否在与该目标节点对应的节点事件处理模块的处理范围内，将处于目标节点对应的节点事件处理模块处理范围内的事件传送至所述目标节点对应的节点事件处理模块处理并终止事件继续冒泡。
6.如权利要求1-3中任一所述处理网页鼠标点击事件的方法，其特征在于，所述浏览器为IE。
7.如权利要求1-3中任一所述处理网页鼠标点击事件的方法，其特征在于，所述根节点事件监听模块以及根节点事件处理模块主要由嵌入所述超文本文件的脚本形成。
8.如权利要求4所述处理网页鼠标点击事件的方法，其特征在于，所述节点事件处理模块主要由嵌入所述超文本文件的脚本形成。
9.如权利要求5所述处理网页鼠标点击事件的方法，其特征在于，所述节点事件监听模块以及节点事件处理模块主要由嵌入所述超文本文件的脚本形成。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201210086104.XA CN103365859B (zh) | 2012-03-28 | 2012-03-28 | 处理网页鼠标点击事件的方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201210086104.XA CN103365859B (zh) | 2012-03-28 | 2012-03-28 | 处理网页鼠标点击事件的方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN103365859A true CN103365859A (zh) | 2013-10-23 |
| CN103365859B CN103365859B (zh) | 2017-03-08 |
Family
ID=49367232
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201210086104.XA Active CN103365859B (zh) | 2012-03-28 | 2012-03-28 | 处理网页鼠标点击事件的方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN103365859B (zh) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109522502A (zh) * | 2015-09-09 | 2019-03-26 | 北京奇虎科技有限公司 | 一种用于识别网页中可见图片的方法及装置 |
| CN109901916A (zh) * | 2019-02-26 | 2019-06-18 | 北京小米移动软件有限公司 | 事件的回调函数执行方法、装置、存储介质和移动终端 |
| CN111046317A (zh) * | 2019-12-27 | 2020-04-21 | 北京奇艺世纪科技有限公司 | 页面数据采集方法、装置、设备和计算机可读存储介质 |
| CN111625303A (zh) * | 2019-02-27 | 2020-09-04 | 阿里巴巴集团控股有限公司 | 事件处理方法、装置、设备及可读存储介质 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20050027823A1 (en) * | 2001-04-09 | 2005-02-03 | Ahad Rana | Server-based browser system |
| CN1211743C (zh) * | 2000-02-24 | 2005-07-20 | 国际商业机器公司 | 服务器端的html定制方法和系统 |
| CN101052936A (zh) * | 2004-08-02 | 2007-10-10 | 佳思腾软件公司 | 用于在标记语言环境中将事件指派给动作的文档处理和管理方法 |
| US20080016182A1 (en) * | 2006-07-11 | 2008-01-17 | Nokia Corporation | Dynamic device profile interfaces |
| CN102637193A (zh) * | 2012-02-23 | 2012-08-15 | 北京航空航天大学 | 一种基于dom与xmpp的网页即时协同浏览方法 |
-
2012
- 2012-03-28 CN CN201210086104.XA patent/CN103365859B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1211743C (zh) * | 2000-02-24 | 2005-07-20 | 国际商业机器公司 | 服务器端的html定制方法和系统 |
| US20050027823A1 (en) * | 2001-04-09 | 2005-02-03 | Ahad Rana | Server-based browser system |
| CN101052936A (zh) * | 2004-08-02 | 2007-10-10 | 佳思腾软件公司 | 用于在标记语言环境中将事件指派给动作的文档处理和管理方法 |
| US20080016182A1 (en) * | 2006-07-11 | 2008-01-17 | Nokia Corporation | Dynamic device profile interfaces |
| CN102637193A (zh) * | 2012-02-23 | 2012-08-15 | 北京航空航天大学 | 一种基于dom与xmpp的网页即时协同浏览方法 |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109522502A (zh) * | 2015-09-09 | 2019-03-26 | 北京奇虎科技有限公司 | 一种用于识别网页中可见图片的方法及装置 |
| CN109522502B (zh) * | 2015-09-09 | 2021-03-09 | 北京奇虎科技有限公司 | 一种用于识别网页中可见图片的方法及装置 |
| CN109901916A (zh) * | 2019-02-26 | 2019-06-18 | 北京小米移动软件有限公司 | 事件的回调函数执行方法、装置、存储介质和移动终端 |
| CN111625303A (zh) * | 2019-02-27 | 2020-09-04 | 阿里巴巴集团控股有限公司 | 事件处理方法、装置、设备及可读存储介质 |
| CN111625303B (zh) * | 2019-02-27 | 2023-06-09 | 阿里巴巴集团控股有限公司 | 事件处理方法、装置、设备及可读存储介质 |
| CN111046317A (zh) * | 2019-12-27 | 2020-04-21 | 北京奇艺世纪科技有限公司 | 页面数据采集方法、装置、设备和计算机可读存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN103365859B (zh) | 2017-03-08 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108885627B (zh) | 向远程客户端提供查询结果数据的查询即服务系统 | |
| CN102768636B (zh) | 一种日志解析方法及装置 | |
| US9317392B2 (en) | Methods and automated systems for testing, optimization, and analysis that preserve continuity in identities and status of users who access remote information from different contexts | |
| CN102752388A (zh) | 基于浏览器的交互系统、方法、浏览器和云端服务器 | |
| CN101902485B (zh) | 一种反向Web代理的链接改写方法 | |
| US20130290450A1 (en) | Method and system that streams real-time, processed data from remote processor-controlled appliances | |
| CN107766509B (zh) | 一种网页静态备份的方法和装置 | |
| US10250521B2 (en) | Data stream identifying method and device | |
| CN103139137B (zh) | 网络服务提供方法及装置 | |
| CN105095280A (zh) | 一种浏览器缓存方法和装置 | |
| CN109829121B (zh) | 一种点击行为数据上报的方法和装置 | |
| CN103853767A (zh) | 一种基于浏览器的社交圈分享方法和装置 | |
| CN103905495A (zh) | 一种应用的同步方法及后台服务器 | |
| CN104426985A (zh) | 显示网页的方法、装置及系统 | |
| CN103365859A (zh) | 处理网页鼠标点击事件的方法 | |
| JP2014505299A (ja) | マイクロウェブログのメッセージを処理するための方法および装置 | |
| CN104065679B (zh) | 一种远程桌面操作的方法及客户端 | |
| CN103747074A (zh) | 基于Web服务器的移动监控系统 | |
| WO2012016034A1 (en) | System and method for providing network resource identifier shortening service to computing devices | |
| KR20130065777A (ko) | 인스펙터 스크립트 삽입을 통한 웹 콘텐츠 공유 장치 및 방법 | |
| CN103458065A (zh) | 一种HTML5标准下基于Webkit内核的视频地址提取方法 | |
| CN110555145A (zh) | 一种基于浏览器的网页内容采集系统及其采集方法 | |
| CN103927367A (zh) | 基于事件的微博采集系统及方法 | |
| CN103354546A (zh) | 报文过滤方法与装置 | |
| CN103873443A (zh) | 信息处理方法、本地代理服务器和网络代理服务器 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C14 | Grant of patent or utility model | ||
| GR01 | Patent grant | ||
| PE01 | Entry into force of the registration of the contract for pledge of patent right | ||
| PE01 | Entry into force of the registration of the contract for pledge of patent right |
Denomination of invention: Method for handling mouse click events on web pages Effective date of registration: 20230712 Granted publication date: 20170308 Pledgee: Industrial Bank Co.,Ltd. Shanghai Jinqiao Branch Pledgor: SHANGHAI SHOPEX NETWORK TECHNOLOGY Co.,Ltd.|SHOPEX SOFTWARE CO.,LTD. Registration number: Y2023310000365 |
|
| PC01 | Cancellation of the registration of the contract for pledge of patent right | ||
| PC01 | Cancellation of the registration of the contract for pledge of patent right |
Date of cancellation: 20231007 Granted publication date: 20170308 Pledgee: Industrial Bank Co.,Ltd. Shanghai Jinqiao Branch Pledgor: SHANGHAI SHOPEX NETWORK TECHNOLOGY Co.,Ltd.|SHOPEX SOFTWARE CO.,LTD. Registration number: Y2023310000365 |