CN111104109A

CN111104109A - 一种web页面上的右键菜单的处理方法、***、介质和计算机设备

Info

Publication number: CN111104109A
Application number: CN201811268639.2A
Authority: CN
Inventors: 易榜宇; 万振; 赵鹏
Original assignee: Beijing Shuju Xinyun Information Technology Co ltd
Current assignee: Beijing Shuju Xinyun Information Technology Co ltd
Priority date: 2018-10-29
Filing date: 2018-10-29
Publication date: 2020-05-05

Abstract

本申请公开了一种WEB页面上的右键菜单的处理方法、***、介质和计算机设备，该方法包括：将待生成右键菜单的页面元素表示为标识符，并记录所述页面元素与所述标识符的对应关系，其中所述标识符与所述页面元素一一对应；利用所述标识符，为所述标识符对应的所述页面元素编写右键菜单配置文件；判断所述页面元素所在的页面是否存在对应的右键点击响应事件，若不存在则为该页面设置右键点击响应事件。该方法和***操作步骤更为简单，效率更高。

Description

一种WEB页面上的右键菜单的处理方法、***、介质和计算机设备

技术领域

本申请涉及计算机技术领域，尤其涉及一种WEB页面上的右键菜单的处理方法、***、介质和计算机设备。

背景技术

在传统的应用开发中，对于WEB页面中页面元素右键菜单的设计和开发，基本是在***中分成四步完成的：

(1)编写右键菜单DOM元素，在DOM元素相应的菜单项中绑定好事件；

(2)选取需要添加右键菜单的页面元素；

(3)为选取好的DOM元素添加右键点击事件；

(4)事件里面屏蔽网页默认右键事件，将步骤(1)中编写好的DOM展现出来。

由此可以看出传统的开发页面元素右键菜单的方法存在以下缺点：

(1)每一个新的右键菜单项需要单独编写选取DOM，绑定菜单项，并为菜单项绑定对应的点击事件；

(2)由于使用了大量的DOM选取、事件绑定，代码可读性差；

(3)采用了高度耦合的编码方式，后期维护成本高。

即，一旦需要为新的DOM添加不同的右键点击事件，就得重新执行上述(1)-(4)的步骤。因此，常规的WEB页面元素的右键菜单设计和开发步骤繁琐，效率低下，后期维护成本很高。

因此，需要一种高效的处理WEB页面上的右键菜单的方法和***。

发明内容

为了解决现有技术中处理WEB页面上的右键菜单中的问题，提出了一种关于WEB页面上的右键菜单的处理方法、***、介质和计算机设备。

根据本申请的一个方面，提供了一种WEB页面上的右键菜单的处理方法，所述方法包括：

将待生成右键菜单的页面元素表示为标识符，并记录所述页面元素与所述标识符的对应关系，其中所述标识符与所述页面元素一一对应；

利用所述标识符，为所述标识符对应的所述页面元素编写右键菜单配置文件；

判断所述页面元素所在的页面是否存在对应的右键点击响应事件，若不存在则为该页面设置右键点击响应事件。

其中，所述方法还包括：

在为所述页面设置右键点击响应事件后，或者若所述页面元素所在的页面存在对应的右键点击响应事件，执行下述步骤：将所述配置文件存储为与所述右键点击响应事件关联的信息。

其中，为该页面设置右键点击响应事件包括：

使所述页面检测页面上任何位置是否接收到右键点击，若接收到，则执行相应的响应事件。

其中，执行相应的响应事件包括：

基于所述右键点击在所述页面上的位置，显示与所述页面上的位置相应的页面元素的右键菜单。

其中，基于所述右键点击在所述页面上的位置显示与所述页面上的位置相应的页面元素的右键菜单包括：

获取与所述位置相应的页面元素，基于所述对应关系获取与所述页面元素对应的标识符，并基于所述标识符在与所述右键点击响应事件关联的信息中查询是否存在与所述标识符相应的配置文件，若存在，则屏蔽与所述标识符对应的页面元素的默认右键菜单，从所述配置文件中获取菜单项并在所述页面上与所述页面元素相应的位置上显示，若不存在，则在所述页面上与所述页面元素相应的位置上显示与所述标识符对应的页面元素的默认右键菜单。

其中，所述方法还包括：

当所述页面检测到接收到右键点击时，执行所述右键点击响应事件。

根据本申请的另一方面，还提供了一种WEB页面上的右键菜单的处理***，所述***包括：

生成模块，用于将待生成右键菜单的页面元素表示为标识符，并记录所述页面元素与所述标识符的对应关系，其中所述标识符与所述页面元素一一对应；

编写模块，用于利用所述标识符，为所述标识符对应的所述页面元素编写右键菜单配置文件；

设置模块，用于判断所述页面元素所在的页面是否存在对应的右键点击响应事件，若不存在则为该页面设置右键点击响应事件。

其中，所述***还包括存储模块，所述存储模块用于所述设置模块在为所述页面设置右键点击响应事件后，或者若所述设置模块判断所述页面元素所在的页面存在对应的右键点击响应事件时，将所述配置文件存储为与所述右键点击响应事件关联的信息。

其中，所述***还包括响应模块，所述响应模块用于检测所述页面上任何位置接收到右键点击时，执行相应的响应事件。

其中，所述响应模块还用于：

根据本申请的另一方面，还提供了一种计算机可读存储介质，所述存储介质上存储有计算机程序，所述程序被处理器执行时实现上述方法的步骤。

根据本申请的另一方面，还提供了一种计算机设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现上述方法的步骤。

本申请中，将页面元素抽象为标识符，利用该标识符为页面元素编写右键菜单配置文件，在页面接收到右键点击时，将与被点击的页面元素相应的菜单项显示，而无需将右键菜单配置文件与该页面元素绑定。

上述方式相比较现有技术中的操作步骤，可以实现对右键菜单项的封装，这样通过简单的配置信息就可以实现右键菜单的自定义，操作步骤更为简单，效率更高。

在页面的任何位置点击右键都可以触发右键点击响应事件，并显示点击位置处的页面元素的右键菜单。这样，把对各个页面元素的右键菜单的显示都与同一页面的右键点击响应事件相关联，减少了对浏览器资源的消耗。

具体地，本申请的有益效果还体现在以下几点：

(1)通过配置文件的方式定义右键菜单，可以一目了然的看到对页面元素定义了哪些右键菜单项；

(2)提升开发效率，开发人员只需要按照相应的规则去编写配置文件，不用了解绑定的细节，也不用编写大量繁琐的右键菜单绑定代码；

(3)减少了代码量，省去了大量的为每个DOM绑定相应的菜单项，为对应的菜单项绑定对应的事件的时间和操作步骤；

(4)采用了低耦合的架构模式，右键菜单具有更好的重用性，维护性，扩展性，可以更高效的完成右键菜单的维护开发，持续地支持业务的发展。

附图说明

构成本申请的一部分的附图用来提供对本申请的进一步理解，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请的WEB页面上的右键菜单的处理方法的流程图；

图2是根据本申请的WEB页面上的右键菜单的处理***的模块图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互任意组合。

现有技术中，开发WEB页面中页面元素右键菜单的操作存在下述问题：

(2)由于使用了大量的DOM选取、事件绑定，代码可读性差；

(3)采用了高度耦合的编码方式，后期维护成本高。

这就使得常规的WEB页面元素的右键菜单设计和开发步骤繁琐，效率低下，后期维护成本很高。

为了解决现有技术中的问题，提高处理WEB页面中页面元素右键菜单的便捷性，本申请提出了一种新的处理页面元素的右键菜单的方法。该方法将页面元素抽象为标识符，利用该标识符为页面元素编写右键菜单配置文件，在页面接收到右键点击时，将与被点击的页面元素相应的菜单项显示，而无需将右键菜单配置文件与该页面元素绑定。

通过这种方式，可以实现对右键菜单项的封装，这样通过简单的配置信息就可以实现右键菜单的自定义，操作步骤更为简单，效率更高。并且，在页面的任何位置点击右键都可以触发右键点击响应事件，并显示点击位置处的页面元素的右键菜单。这样，把对各个页面元素的右键菜单的显示都与同一页面的右键点击响应事件相关联，减少了对浏览器资源的消耗。

本申请提供了一种WEB页面上的右键菜单的处理方法，该方法包括：

步骤101，将待生成右键菜单的页面元素表示为标识符，并记录页面元素与标识符的对应关系，其中标识符与页面元素一一对应；

步骤102，利用标识符，为标识符对应的页面元素编写右键菜单配置文件；

步骤103，判断页面元素所在的页面是否存在对应的右键点击响应事件，若不存在则为该页面设置右键点击响应事件。

为了能够给页面元素编写配置文件，需要将页面元素表示为标识符，这是为了便于在配置文件中选取相应的页面元素，即在配置文件中为一标识符配置右键菜单即表示给相应的页面元素添加右键菜单。这里的标识符可以是字符串的形式，也可以是数字的形式。并且，标识符与页面元素一一对应，这样编写的配置文件中的标识符对应唯一的页面元素。

将页面元素表示为标识符可以通过现有的技术方法实现，例如采用WEB开发元素自带的一个属性ID，给其添加唯一的ID即可。

步骤103还包括：在为页面设置右键点击响应事件后，或者若页面元素所在的页面存在对应的右键点击响应事件，执行下述步骤：将配置文件存储为与右键点击响应事件关联的信息。

步骤102中，按照一定的编写规则编写右键菜单配置文件。编写规则可以是所采用的具体***定义的规则。例如，下面给出了一个在配置文件中针对某一标识符(即页面元素)编写的菜单项的例子：

list：[

{“type”:“button”,“name”:“switch”,“title”:“翻页效果设置”}

{“type”:“button”,“name”:“switchingBackground”,“title”:“切换背景”}

{“type”:“hr”}

{“type”:“button”,“name”:“appdesktop”,“title”:“切换到APP桌面”，icon：“/img/icon/start-color.png”}

]

上述list中的内容即为相应页面元素的右键菜单的菜单项，其中定义了菜单项的title、样式、响应事件。其中也对页面样式、响应事件进行了封装和抽象。例如，“type”:“button”表示是一个按钮形式的，“type”:“hr”表示该菜单项下面有一条分割线，“name”里面定义了该菜单项点击将会执行的响应事件。

只要按照所使用的***定义的规则进行编写即可，在此不再赘述。

在本申请中，不需要将菜单项将页面元素绑定，只要触发右键点击响应事件时，能够根据被点击的页面元素获取相应的菜单项并显示即可。

步骤103中，为该页面设置右键点击响应事件包括：使所述页面检测页面上任何位置是否接收到右键点击，若接收到，则执行相应的响应事件。

为了使WEB页面上任何一个位置接收到右键点击时，都能触发右键菜单项的显示，需要将显示右键菜单项的操作设置在右键点击响应事件中。因此，当一个页面已经被设置了右键点击响应事件时，才会将配置文件存储为与右键点击响应事件关联的信息。与右键点击响应事件关联的信息可以由***在检测到页面接收右键点击时获取。

在右键点击响应事件中设置相应的响应事件，当页面上任意位置接收到右键点击时，则执行相应的响应事件。

其中，执行相应的响应事件包括：基于所述右键点击在所述页面上的位置，显示与所述页面上的位置相应的页面元素的右键菜单。

具体地，基于所述右键点击在所述页面上的位置显示与所述页面上的位置相应的页面元素的右键菜单包括：获取与所述位置相应的页面元素，基于所述对应关系获取与所述页面元素对应的标识符，并基于所述标识符在与所述右键点击响应事件关联的信息中查询是否存在与所述标识符相应的配置文件，若存在，则屏蔽与所述标识符对应的页面元素的默认右键菜单，从所述配置文件中获取菜单项并在所述页面上与所述页面元素相应的位置上显示，若不存在，则在所述页面上与所述页面元素相应的位置上显示与所述标识符对应的页面元素的默认右键菜单。

这里，获取右键点击位置所处的页面元素可以通过现有方式实现，不再赘述。通过已经记录存储的页面元素与标识符的一一对应关系，可以得到该被右键点击的页面元素的标识符。基于该标识符在存储的与右键点击响应事件关联的信息(即各页面元素的右键菜单配置文件)中进行查询，如果存在关于该标识符的配置文件(在一配置文件中出现该标识符)，则表示为该页面元素生成了右键菜单，则从该配置文件中获取菜单项并显示；如果不存在关于该标识符的配置文件，则表示尚未为该页面元素生成右键菜单，则显示该页面元素的默认右键菜单。需要说明的是，当存在关于该标识符的配置文件，即已为该页面元素生成右键菜单时，需要先屏蔽其默认的右键菜单，再显示配置文件中为该页面元素定义的菜单项。

下面详细描述根据本申请的具体实施例，该具体实施例包括下述步骤：

步骤一，将待生成右键菜单的页面元素X表示为与其一一对应的标识符ID1，并记录相应的对应关系。

步骤二，利用标识符ID1，为标识符ID1对应的页面元素X编写右键菜单配置文件，在该配置文件的list数据项中列出具体的菜单项。

步骤三，判断页面元素X所在的WEB页面是否存在对应的右键点击响应事件，若不存在则为该页面设置右键点击响应事件。

步骤四，将该配置文件存储为右键点击响应事件关联信息，以便接收到右键点击时使用。

步骤五，页面元素X所在的WEB页面检测到其接收到右键点击，获取与点击位置处的页面元素X。

步骤六，基于页面元素与标识符的对应关系，得到标识符ID1，基于该标识符ID1在右键点击响应事件关联信息中进行查询，查询到与该标识符ID1相应的配置文件，屏蔽页面元素X的默认右键菜单并根据鼠标当前所在位置显示与页面元素X相应的菜单项。

在本申请中，只给整个页面的body元素添加右键点击响应事件，然后在右键点击响应事件内部执行各种操作。由于是给整个body元素添加右键点击响应事件，所以在页面上任何地方进行右键点击均能触发该响应事件。

本发明还提供了一种计算机可读存储介质，所述存储介质上存储有计算机程序，所述程序被处理器执行时实现上述方法的步骤。

本发明还提供了，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现上述方法的步骤。

本申请还提供了一种WEB页面上的右键菜单的处理***，所述***包括：

生成模块201，用于将待生成右键菜单的页面元素表示为标识符，并记录所述页面元素与所述标识符的对应关系，其中所述标识符与所述页面元素一一对应；

编写模块202，用于利用所述标识符，为所述标识符对应的所述页面元素编写右键菜单配置文件；

设置模块203，用于判断所述页面元素所在的页面是否存在对应的右键点击响应事件，若不存在则为该页面设置右键点击响应事件。

其中，所述响应模块还用于：

具体地，本申请的有益效果还体现在以下几点：

上面描述的内容可以单独地或者以各种方式组合起来实施，而这些变型方式都在本申请的保护范围之内。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括……”限定的要素，并不排除在包括所述要素的物品或者设备中还存在另外的相同要素。

以上实施例仅用以说明本申请的技术方案而非限制，仅仅参照较佳实施例对本申请进行了详细说明。本领域的普通技术人员应当理解，可以对本申请的技术方案进行修改或者等同替换，而不脱离本申请技术方案的精神和范围，均应涵盖在本申请的权利要求范围当中。

本领域普通技术人员可以理解，上文中所公开方法中的全部或某些步骤、***、装置中的功能模块/单元可以被实施为软件、固件、硬件及其适当的组合。在硬件实施方式中，在以上描述中提及的功能模块/单元之间的划分不一定对应于物理组件的划分；例如，一个物理组件可以具有多个功能，或者一个功能或步骤可以由若干物理组件合作执行。某些组件或所有组件可以被实施为由处理器，如数字信号处理器或微处理器执行的软件，或者被实施为硬件，或者被实施为集成电路，如专用集成电路。这样的软件可以分布在计算机可读介质上，计算机可读介质可以包括计算机存储介质(或非暂时性介质)和通信介质(或暂时性介质)。如本领域普通技术人员公知的，术语计算机存储介质包括在用于存储信息(诸如计算机可读指令、数据结构、程序模块或其他数据)的任何方法或技术中实施的易失性和非易失性、可移除和不可移除介质。计算机存储介质包括但不限于RAM、ROM、EEPROM、闪存或其他存储器技术、CD-ROM、数字多功能盘(DVD)或其他光盘存储、磁盒、磁带、磁盘存储或其他磁存储装置、或者可以用于存储期望的信息并且可以被计算机访问的任何其他的介质。此外，本领域普通技术人员公知的是，通信介质通常包含计算机可读指令、数据结构、程序模块或者诸如载波或其他传输机制之类的调制数据信号中的其他数据，并且可包括任何信息递送介质。

Claims

1.一种WEB页面上的右键菜单的处理方法，其特征在于，所述方法包括：

2.如权利要求1所述的处理方法，其特征在于，所述方法还包括：

3.如权利要求2所述的处理方法，其特征在于，为该页面设置右键点击响应事件包括：

4.如权利要求3所述的处理方法，其特征在于，执行相应的响应事件包括：

5.如权利要求4所述的处理方法，其特征在于，基于所述右键点击在所述页面上的位置显示与所述页面上的位置相应的页面元素的右键菜单包括：

6.如权利要求1-5中任一项所述的处理方法，其特征在于，所述方法还包括：

7.一种WEB页面上的右键菜单的处理***，其特征在于，所述***包括：

8.如权利要求7所述的处理***，其特征在于，所述***还包括存储模块，所述存储模块用于所述设置模块在为所述页面设置右键点击响应事件后，或者若所述设置模块判断所述页面元素所在的页面存在对应的右键点击响应事件时，将所述配置文件存储为与所述右键点击响应事件关联的信息。

9.如权利要求8所述的处理***，其特征在于，所述***还包括响应模块，所述响应模块用于检测所述页面上任何位置接收到右键点击时，执行相应的响应事件。

10.如权利要求9所述的处理***，其特征在于，所述响应模块还用于：

11.如权利要求10所述的处理***，其特征在于，所述响应模块还用于：

12.一种计算机可读存储介质，其特征在于，所述存储介质上存储有计算机程序，所述程序被处理器执行时实现权利要求1至6中任意一项所述方法的步骤。

13.一种计算机设备，其特征在于，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现权利要求1至6中任意一项所述方法的步骤。