本發(fā)明涉及網(wǎng)頁設(shè)計(jì)技術(shù)領(lǐng)域，具體而言，涉及一種網(wǎng)頁中目標(biāo)組件的確定方法及裝置。

背景技術(shù)：

目前，為了便于網(wǎng)頁設(shè)計(jì)人員快速創(chuàng)建網(wǎng)頁，達(dá)到網(wǎng)頁可視化制作的目的，通常把一組html代碼片段定義為組件，通過公司研發(fā)的網(wǎng)頁編輯器，首先選擇待設(shè)計(jì)的組件，然后對該網(wǎng)頁組件進(jìn)行操作，如通過拖拽操作改變組件的位置和大小、以及通過修改組件的屬性值設(shè)置屬性等操作，實(shí)現(xiàn)對組件的外觀和功能進(jìn)行設(shè)計(jì)的效果，最后，再通過將不同組件進(jìn)行組合，生成目標(biāo)網(wǎng)頁。

在選擇待設(shè)計(jì)的組件過程中，在web網(wǎng)頁編輯器中需要識(shí)別和選擇要操作的組件，由于頁面中可操作組件外層包有一層容器包裹，限定組件的位置和大小，一般的方式是在組件包裹容器上通過瀏覽器提供的點(diǎn)擊、鼠標(biāo)移入等事件方式識(shí)別并確定目標(biāo)組件。由于組件本身也會(huì)有一些用戶交互操作，如鏈接跳轉(zhuǎn)、移上彈出菜單等，這將影響通過拖拽操作改變組件的位置和大小等設(shè)計(jì)類動(dòng)作。當(dāng)前，相關(guān)技術(shù)中提供的網(wǎng)頁中目標(biāo)組件的確定方法中，考慮到組件本身有交互動(dòng)作，為了在組件設(shè)計(jì)時(shí)避免觸發(fā)組件本身交互動(dòng)作，通過在頁面上覆蓋一層與頁面相同大小的隔離層，實(shí)現(xiàn)將用戶對組件的操作和組件本身的交互動(dòng)作隔離開。

在實(shí)現(xiàn)本發(fā)明的過程中，發(fā)明人發(fā)現(xiàn)相關(guān)技術(shù)中至少存在以下問題：由于在用戶操作界面和網(wǎng)頁部件之間增加了隔離層，可以實(shí)現(xiàn)用戶對組件的操作和組件本身的交互動(dòng)作之間互不干擾，但導(dǎo)致利用瀏覽器提供的鼠標(biāo)事件識(shí)別的方式無法快速、準(zhǔn)確地對網(wǎng)頁中目標(biāo)組件進(jìn)行識(shí)別并選中。

技術(shù)實(shí)現(xiàn)要素：

有鑒于此，本發(fā)明實(shí)施例的目的在于提供一種網(wǎng)頁中目標(biāo)組件的確定方法及裝置，以實(shí)現(xiàn)在增加隔離層的情況下同樣可以快速、準(zhǔn)確地對網(wǎng)頁中目標(biāo)組件進(jìn)行識(shí)別并選中。

第一方面，本發(fā)明實(shí)施例提供了一種網(wǎng)頁中目標(biāo)組件的確定方法，該方法包括：

獲取用戶在網(wǎng)頁編輯器的隔離層上點(diǎn)擊組件的點(diǎn)擊位置坐標(biāo)；

獲取當(dāng)前網(wǎng)頁上的各個(gè)所述組件之間的層級關(guān)系和各個(gè)所述組件的平面坐標(biāo)范圍信息；

在各個(gè)所述組件中，確定所述平面坐標(biāo)范圍信息包含所述點(diǎn)擊位置坐標(biāo)且所述層級關(guān)系排序最前的一個(gè)所述組件作為目標(biāo)組件。

結(jié)合第一方面，本發(fā)明實(shí)施例提供了第一方面的第一種可能的實(shí)施方式，其中，所述獲取當(dāng)前網(wǎng)頁上的各個(gè)所述組件之間的層級關(guān)系，包括：

遞歸當(dāng)前網(wǎng)頁上的部件樹，根據(jù)所述部件樹中各個(gè)部件的層級屬性確定各個(gè)所述部件之間的層級關(guān)系，記為父層級關(guān)系，所述部件包括容器，所述容器中嵌套有至少一個(gè)組件；

遍歷各個(gè)所述容器，獲取所述容器中嵌套的各個(gè)組件在所述容器內(nèi)的層級關(guān)系，記為所述容器的子層級關(guān)系；

將所有所述容器的所述子層級關(guān)系引入到所述父層級關(guān)系相應(yīng)的層級中，組成當(dāng)前網(wǎng)頁下的各個(gè)組件之間的層級關(guān)系。

結(jié)合第一方面，本發(fā)明實(shí)施例提供了第一方面的第二種可能的實(shí)施方式，其中，所述確定所述平面坐標(biāo)范圍信息包含所述點(diǎn)擊位置坐標(biāo)且所述層級關(guān)系排序最前的一個(gè)所述組件作為目標(biāo)組件，包括：

查詢包含所述點(diǎn)擊位置坐標(biāo)的至少一個(gè)所述組件的平面坐標(biāo)范圍信息，選取所述平面坐標(biāo)范圍信息對應(yīng)的組件；

將選取的至少一個(gè)所述組件中層級關(guān)系排序最前的一個(gè)所述組件作為目標(biāo)組件。

結(jié)合第一方面，本發(fā)明實(shí)施例提供了第一方面的第三種可能的實(shí)施方式，其中，所述確定所述平面坐標(biāo)范圍信息包含所述點(diǎn)擊位置坐標(biāo)且所述層級關(guān)系排序最前的一個(gè)所述組件作為目標(biāo)組件，包括：

根據(jù)所述層級關(guān)系和所述平面坐標(biāo)范圍信息生成組件信息列表，所述組件信息列表中的所述平面坐標(biāo)范圍信息按照各個(gè)組件的層級由高至低排序；

按照層級由高至低的順序遍歷所述組件信息列表中各個(gè)組件的所述平面坐標(biāo)范圍信息，并將所述平面坐標(biāo)范圍信息與所述點(diǎn)擊位置坐標(biāo)進(jìn)行對比；

將遍歷到的首個(gè)包含所述點(diǎn)擊位置坐標(biāo)的所述平面坐標(biāo)范圍信息對應(yīng)的組件作為目標(biāo)組件。

結(jié)合第一方面至第一方面的第三種可能的實(shí)施方式中的任一種實(shí)施方式，本發(fā)明實(shí)施例提供了第一方面的第四種可能的實(shí)施方式，其中，所述獲取當(dāng)前網(wǎng)頁上的各個(gè)所述組件之間的層級關(guān)系和各個(gè)所述組件的平面坐標(biāo)范圍信息，包括：

獲取當(dāng)前網(wǎng)頁下可見范圍內(nèi)的各個(gè)所述組件之間的層級關(guān)系和各個(gè)所述組件的平面坐標(biāo)范圍信息。

第二方面，本發(fā)明實(shí)施例還提供了一種網(wǎng)頁中目標(biāo)組件的確定裝置，該裝置包括：

第一獲取模塊，用于獲取用戶在網(wǎng)頁編輯器的隔離層上點(diǎn)擊組件的點(diǎn)擊位置坐標(biāo)；

第二獲取模塊，用于獲取當(dāng)前網(wǎng)頁上的各個(gè)所述組件之間的層級關(guān)系和各個(gè)所述組件的平面坐標(biāo)范圍信息；

目標(biāo)組件確定模塊，用于在各個(gè)所述組件中，確定所述平面坐標(biāo)范圍信息包含所述點(diǎn)擊位置坐標(biāo)且所述層級關(guān)系排序最前的一個(gè)所述組件作為目標(biāo)組件。

結(jié)合第二方面，本發(fā)明實(shí)施例提供了第二方面的第一種可能的實(shí)施方式，其中，所述第二獲取模塊包括：

父層級關(guān)系確定子模塊，用于遞歸當(dāng)前網(wǎng)頁上的部件樹，根據(jù)所述部件樹中各個(gè)部件的層級屬性確定各個(gè)所述部件之間的層級關(guān)系，記為父層級關(guān)系，所述部件包括容器，所述容器中嵌套有至少一個(gè)組件；

子層級關(guān)系確定子模塊，用于遍歷各個(gè)所述容器，獲取所述容器中嵌套的各個(gè)組件在所述容器內(nèi)的層級關(guān)系，記為所述容器的子層級關(guān)系；

組件層級關(guān)系確定子模塊，用于將所有所述容器的所述子層級關(guān)系引入到所述父層級關(guān)系相應(yīng)的層級中，組成當(dāng)前網(wǎng)頁下的各個(gè)組件之間的層級關(guān)系。

結(jié)合第二方面，本發(fā)明實(shí)施例提供了第二方面的第二種可能的實(shí)施方式，其中，所述目標(biāo)組件確定模塊包括：

查詢子模塊，用于查詢包含所述點(diǎn)擊位置坐標(biāo)的至少一個(gè)所述組件的平面坐標(biāo)范圍信息，選取所述平面坐標(biāo)范圍信息對應(yīng)的組件；

第一目標(biāo)組件確定子模塊，用于將選取的至少一個(gè)所述組件中層級關(guān)系排序最前的一個(gè)所述組件作為目標(biāo)組件。

結(jié)合第二方面，本發(fā)明實(shí)施例提供了第二方面的第三種可能的實(shí)施方式，其中，所述目標(biāo)組件確定模塊包括：

信息列表生成子模塊，用于根據(jù)所述層級關(guān)系和所述平面坐標(biāo)范圍信息生成組件信息列表，所述組件信息列表中的所述平面坐標(biāo)范圍信息按照各個(gè)組件的層級由高至低排序；

比對子模塊，用于按照層級由高至低的順序遍歷所述組件信息列表中各個(gè)組件的所述平面坐標(biāo)范圍信息，并將所述平面坐標(biāo)范圍信息與所述點(diǎn)擊位置坐標(biāo)進(jìn)行對比；

第二目標(biāo)組件確定子模塊，用于將遍歷到的首個(gè)包含所述點(diǎn)擊位置坐標(biāo)的所述平面坐標(biāo)范圍信息對應(yīng)的組件作為目標(biāo)組件。

結(jié)合第二方面至第二方面的第三種可能的實(shí)施方式中的任一種實(shí)施方式，本發(fā)明實(shí)施例提供了第二方面的第四種可能的實(shí)施方式，其中，所述第二獲取模塊具體包括：

獲取當(dāng)前網(wǎng)頁下可見范圍內(nèi)的各個(gè)所述組件之間的層級關(guān)系和各個(gè)所述組件的平面坐標(biāo)范圍信息。

在本發(fā)明實(shí)施例提供的網(wǎng)頁中目標(biāo)組件的確定方法及裝置中，獲取用戶在網(wǎng)頁編輯器的隔離層上點(diǎn)擊組件的點(diǎn)擊位置坐標(biāo)；以及獲取當(dāng)前網(wǎng)頁上的各個(gè)組件之間的層級關(guān)系和各個(gè)組件的平面坐標(biāo)范圍信息；在各個(gè)組件中，確定平面坐標(biāo)范圍信息包含點(diǎn)擊位置坐標(biāo)且層級關(guān)系排序最前的一個(gè)組件作為目標(biāo)組件。本發(fā)明實(shí)施例通過根據(jù)各個(gè)組件的層級關(guān)系和各個(gè)組件的平面坐標(biāo)范圍選取出平面坐標(biāo)范圍信息包含點(diǎn)擊位置坐標(biāo)且層級關(guān)系排序最前的一個(gè)組件，并將該組件作為目標(biāo)組件，從而實(shí)現(xiàn)在增加隔離層的情況下同樣可以快速、準(zhǔn)確地對網(wǎng)頁中目標(biāo)組件進(jìn)行識(shí)別并選中。

為使本發(fā)明的上述目的、特征和優(yōu)點(diǎn)能更明顯易懂，下文特舉較佳實(shí)施例，并配合所附附圖，作詳細(xì)說明如下。

附圖說明

為了更清楚地說明本發(fā)明實(shí)施例的技術(shù)方案，下面將對實(shí)施例中所需要使用的附圖作簡單地介紹，應(yīng)當(dāng)理解，以下附圖僅示出了本發(fā)明的某些實(shí)施例，因此不應(yīng)被看作是對范圍的限定，對于本領(lǐng)域普通技術(shù)人員來講，在不付出創(chuàng)造性勞動(dòng)的前提下，還可以根據(jù)這些附圖獲得其他相關(guān)的附圖。

圖1示出了本發(fā)明實(shí)施例所提供的一種網(wǎng)頁中目標(biāo)組件的確定方法的流程示意圖；

圖2示出了本發(fā)明實(shí)施例所提供的另一種網(wǎng)頁中目標(biāo)組件的確定方法的流程示意圖；

圖3示出了本發(fā)明實(shí)施例所提供的又一種網(wǎng)頁中目標(biāo)組件的確定方法的流程示意圖；

圖4示出了本發(fā)明實(shí)施例所提供的一種網(wǎng)頁中目標(biāo)組件的確定裝置的結(jié)構(gòu)示意圖；

圖5示出了本發(fā)明實(shí)施例所提供的另一種網(wǎng)頁中目標(biāo)組件的確定裝置的結(jié)構(gòu)示意圖；

圖6示出了本發(fā)明實(shí)施例所提供的又一種網(wǎng)頁中目標(biāo)組件的確定裝置的結(jié)構(gòu)示意圖。

具體實(shí)施方式

為使本發(fā)明實(shí)施例的目的、技術(shù)方案和優(yōu)點(diǎn)更加清楚，下面將結(jié)合本發(fā)明實(shí)施例中附圖，對本發(fā)明實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例僅僅是本發(fā)明一部分實(shí)施例，而不是全部的實(shí)施例。通常在此處附圖中描述和示出的本發(fā)明實(shí)施例的組件可以以各種不同的配置來布置和設(shè)計(jì)。因此，以下對在附圖中提供的本發(fā)明的實(shí)施例的詳細(xì)描述并非旨在限制要求保護(hù)的本發(fā)明的范圍，而是僅僅表示本發(fā)明的選定實(shí)施例?；诒景l(fā)明的實(shí)施例，本領(lǐng)域技術(shù)人員在沒有做出創(chuàng)造性勞動(dòng)的前提下所獲得的所有其他實(shí)施例，都屬于本發(fā)明保護(hù)的范圍。

考慮到相關(guān)技術(shù)中由于在用戶操作界面和網(wǎng)頁部件之間增加了隔離層，可以實(shí)現(xiàn)用戶對組件的操作和組件本身的交互動(dòng)作之間互不干擾，但導(dǎo)致利用瀏覽器提供的鼠標(biāo)事件識(shí)別的方式無法快速、準(zhǔn)確地對網(wǎng)頁中目標(biāo)組件進(jìn)行識(shí)別并選中?；诖耍景l(fā)明實(shí)施例提供了一種網(wǎng)頁中目標(biāo)組件的確定方法及裝置，下面通過實(shí)施例進(jìn)行描述。

如圖1所示，本發(fā)明實(shí)施例提供了一種網(wǎng)頁中目標(biāo)組件的確定方法，該方法包括步驟S102-S106，具體如下：

步驟S102：獲取用戶在網(wǎng)頁編輯器的隔離層上點(diǎn)擊組件的點(diǎn)擊位置坐標(biāo)，其中，在網(wǎng)頁上覆蓋一層與網(wǎng)頁相同大小的隔離層，該隔離層的主要作用是由于部件本身有交互動(dòng)作，為了避免在網(wǎng)頁設(shè)計(jì)時(shí)觸發(fā)部件本身交互動(dòng)作，此時(shí)，用戶點(diǎn)擊組件時(shí)直接在隔離層上進(jìn)行；

步驟S104：獲取當(dāng)前網(wǎng)頁上的各個(gè)所述組件之間的層級關(guān)系和各個(gè)所述組件的平面坐標(biāo)范圍信息；

步驟S106：在各個(gè)所述組件中，確定所述平面坐標(biāo)范圍信息包含所述點(diǎn)擊位置坐標(biāo)且所述層級關(guān)系排序最前的一個(gè)所述組件作為目標(biāo)組件。

其中，在xyz三維坐標(biāo)系中，可以定義沿z軸方向表示各個(gè)組件之間的層級關(guān)系，在x-y平面上表示各個(gè)組件的平面坐標(biāo)范圍信息，每一個(gè)組件在x-y平面上占用一定的平面區(qū)域，每一個(gè)組件在z軸方向上具有特定的層級級別，各個(gè)組件在xyz三維坐標(biāo)系中均對應(yīng)一個(gè)平面坐標(biāo)范圍信息和層級級別，當(dāng)獲取用戶在網(wǎng)頁編輯器的隔離層上點(diǎn)擊組件的點(diǎn)擊位置坐標(biāo)后，在當(dāng)前網(wǎng)頁上的多個(gè)組件中確定出目標(biāo)組件(用戶選擇的頁面組件)，該目標(biāo)組件為包含該點(diǎn)擊位置坐標(biāo)且層級級別最高的組件，即包含該點(diǎn)擊位置坐標(biāo)且距靠近隔離層的組件。

在本發(fā)明提供的實(shí)施例中，通過根據(jù)各個(gè)組件的層級關(guān)系和各個(gè)組件的平面坐標(biāo)范圍選取出平面坐標(biāo)范圍信息包含點(diǎn)擊位置坐標(biāo)且層級關(guān)系排序最前的一個(gè)組件，并將該組件作為目標(biāo)組件，從而實(shí)現(xiàn)在增加隔離層的情況下同樣可以快速、準(zhǔn)確地對網(wǎng)頁中目標(biāo)組件進(jìn)行識(shí)別并選中，以便用戶在設(shè)置面板上對該目標(biāo)組件進(jìn)行拖拽位置、拖拽改變大小、刪除、復(fù)制等編輯操作。

其中，步驟S104獲取當(dāng)前網(wǎng)頁上的各個(gè)所述組件之間的層級關(guān)系，具體包括：

遞歸當(dāng)前網(wǎng)頁上的部件樹，根據(jù)所述部件樹中各個(gè)部件的層級屬性確定各個(gè)所述部件之間的層級關(guān)系，記為父層級關(guān)系，所述部件包括容器，所述容器中嵌套有至少一個(gè)組件；

遍歷各個(gè)所述容器，獲取所述容器中嵌套的各個(gè)組件在所述容器內(nèi)的層級關(guān)系，記為所述容器的子層級關(guān)系；

將所有所述容器的所述子層級關(guān)系引入到所述父層級關(guān)系相應(yīng)的層級中，組成當(dāng)前網(wǎng)頁下的各個(gè)組件之間的層級關(guān)系。

具體的，由于需要確保與瀏覽器渲染的z軸層級順序一致，才能保證正確地確定出目標(biāo)組件(用戶要選擇的部件)，每層容器中有單獨(dú)的層級上下文，如：容器A高于容器B，則容器B中組件的層級級別不會(huì)高于容器A及容器A中任何組件的層級級別，從根(頁面)遞歸容器樹，根據(jù)每個(gè)容器中層級屬性(z-index)排序，從而確定出各個(gè)組件之間的層級關(guān)系。

接下來，在本發(fā)明提供的實(shí)施例中給出兩種確定目標(biāo)組件的方式，具體為：

第一種方式，如圖2所示，步驟S106確定所述平面坐標(biāo)范圍信息包含所述點(diǎn)擊位置坐標(biāo)且所述層級關(guān)系排序最前的一個(gè)所述組件作為目標(biāo)組件，具體包括：

步驟S202：查詢包含所述點(diǎn)擊位置坐標(biāo)的至少一個(gè)所述組件的平面坐標(biāo)范圍信息，選取所述平面坐標(biāo)范圍信息對應(yīng)的組件；

步驟S204：將選取的至少一個(gè)所述組件中層級關(guān)系排序最前的一個(gè)所述組件作為目標(biāo)組件。

在本發(fā)明提供的實(shí)施例中，采用先在多個(gè)平面坐標(biāo)范圍信息中查詢至少一個(gè)包含點(diǎn)擊位置坐標(biāo)的平面坐標(biāo)范圍信息，再在查詢到的至少一個(gè)包含點(diǎn)擊位置坐標(biāo)的平面坐標(biāo)范圍信息中將層級關(guān)系排序最前的作為目標(biāo)組件的方式，采用該種方式確定目標(biāo)組件，無需生成組件信息列表，但需要將點(diǎn)擊位置坐標(biāo)依次與各個(gè)組件的平面坐標(biāo)范圍信息進(jìn)行比對，數(shù)據(jù)處理量大，不合適組件數(shù)量比較大的情況下。

第二種方式，如圖3所示，步驟S106確定所述平面坐標(biāo)范圍信息包含所述點(diǎn)擊位置坐標(biāo)且所述層級關(guān)系排序最前的一個(gè)所述組件作為目標(biāo)組件，具體包括：

步驟S302：根據(jù)所述層級關(guān)系和所述平面坐標(biāo)范圍信息生成組件信息列表，所述組件信息列表中的所述平面坐標(biāo)范圍信息按照各個(gè)組件的層級由高至低排序；

步驟S304：按照層級由高至低的順序遍歷所述組件信息列表中各個(gè)組件的所述平面坐標(biāo)范圍信息，并將所述平面坐標(biāo)范圍信息與所述點(diǎn)擊位置坐標(biāo)進(jìn)行對比；

步驟S306：將遍歷到的首個(gè)包含所述點(diǎn)擊位置坐標(biāo)的所述平面坐標(biāo)范圍信息對應(yīng)的組件作為目標(biāo)組件。

具體的，首先，根據(jù)各個(gè)組件的層級關(guān)系和平面坐標(biāo)范圍信息生成組件信息列表，然后，在該組件信息列表中，依次判斷各個(gè)組件的平面坐標(biāo)范圍信息是否包含該點(diǎn)擊位置坐標(biāo)，挑選出第一個(gè)包含該點(diǎn)擊位置坐標(biāo)的平面坐標(biāo)范圍信息，最后，將該平面坐標(biāo)范圍信息對應(yīng)的組件作為目標(biāo)組件。

在本發(fā)明提供的實(shí)施例中，采用先生成組件信息列表再找包含點(diǎn)擊位置坐標(biāo)的平面坐標(biāo)范圍信息對應(yīng)的組件的方式，只要查找到出包含點(diǎn)擊位置坐標(biāo)的平面坐標(biāo)范圍信息就停止對比步驟，該平面坐標(biāo)范圍信息對應(yīng)的組件即為包含點(diǎn)擊位置坐標(biāo)且層級關(guān)系排序最前的目標(biāo)組件，減少了點(diǎn)擊位置坐標(biāo)與平面坐標(biāo)范圍信息的對比次數(shù)，提高了確定目標(biāo)組件的效率，在組件數(shù)量比較大的情況下，采用該方式確定目標(biāo)組件可以大大提高目標(biāo)組件的確定速度。

進(jìn)一步的，整個(gè)網(wǎng)頁中可能包括用戶不可見的區(qū)域，為了提高后續(xù)確定目標(biāo)組件的效率，在獲取組件的層級關(guān)系和平面坐標(biāo)位置信息時(shí)，過濾掉用戶不可見區(qū)域內(nèi)的不可見組件，僅從用戶可見區(qū)域內(nèi)的可見組件中查找目標(biāo)組件，進(jìn)一步提高目標(biāo)組件的確定速度，基于此，所述獲取當(dāng)前網(wǎng)頁上的各個(gè)所述組件之間的層級關(guān)系和各個(gè)所述組件的平面坐標(biāo)范圍信息，包括：

獲取當(dāng)前網(wǎng)頁下可見范圍內(nèi)的各個(gè)所述組件之間的層級關(guān)系和各個(gè)所述組件的平面坐標(biāo)范圍信息。

在本發(fā)明實(shí)施例提供的網(wǎng)頁中目標(biāo)組件的確定方法中，首先，獲取用戶在網(wǎng)頁編輯器的隔離層上點(diǎn)擊組件的點(diǎn)擊位置坐標(biāo)；以及獲取當(dāng)前網(wǎng)頁上的各個(gè)組件之間的層級關(guān)系和各個(gè)組件的平面坐標(biāo)范圍信息；然后，在各個(gè)組件中，確定平面坐標(biāo)范圍信息包含點(diǎn)擊位置坐標(biāo)且層級關(guān)系排序最前的一個(gè)組件作為目標(biāo)組件。本發(fā)明實(shí)施例通過根據(jù)各個(gè)組件的層級關(guān)系和各個(gè)組件的平面坐標(biāo)范圍選取出平面坐標(biāo)范圍信息包含點(diǎn)擊位置坐標(biāo)且層級關(guān)系排序最前的一個(gè)組件，并將該組件作為目標(biāo)組件，從而實(shí)現(xiàn)在增加隔離層的情況下同樣可以快速、準(zhǔn)確地對網(wǎng)頁中目標(biāo)組件進(jìn)行識(shí)別并選中。

本發(fā)明實(shí)施例還提供一種網(wǎng)頁中目標(biāo)組件的確定裝置，如圖4所示，該裝置包括：

第一獲取模塊402，用于獲取用戶在網(wǎng)頁編輯器的隔離層上點(diǎn)擊組件的點(diǎn)擊位置坐標(biāo)；

第二獲取模塊404，用于獲取當(dāng)前網(wǎng)頁上的各個(gè)所述組件之間的層級關(guān)系和各個(gè)所述組件的平面坐標(biāo)范圍信息；

目標(biāo)組件確定模塊406，用于在各個(gè)所述組件中，確定所述平面坐標(biāo)范圍信息包含所述點(diǎn)擊位置坐標(biāo)且所述層級關(guān)系排序最前的一個(gè)所述組件作為目標(biāo)組件。

在本發(fā)明提供的實(shí)施例中，通過根據(jù)各個(gè)組件的層級關(guān)系和各個(gè)組件的平面坐標(biāo)范圍選取出平面坐標(biāo)范圍信息包含點(diǎn)擊位置坐標(biāo)且層級關(guān)系排序最前的一個(gè)組件，并將該組件作為目標(biāo)組件，從而實(shí)現(xiàn)在增加隔離層的情況下同樣可以快速、準(zhǔn)確地對網(wǎng)頁中目標(biāo)組件進(jìn)行識(shí)別并選中。

進(jìn)一步的，所述第二獲取模塊404包括：

父層級關(guān)系確定子模塊，用于遞歸當(dāng)前網(wǎng)頁上的部件樹，根據(jù)所述部件樹中各個(gè)部件的層級屬性確定各個(gè)所述部件之間的層級關(guān)系，記為父層級關(guān)系，所述部件包括容器，所述容器中嵌套有至少一個(gè)組件；

子層級關(guān)系確定子模塊，用于遍歷各個(gè)所述容器，獲取所述容器中嵌套的各個(gè)組件在所述容器內(nèi)的層級關(guān)系，記為所述容器的子層級關(guān)系；

組件層級關(guān)系確定子模塊，用于將所有所述容器的所述子層級關(guān)系引入到所述父層級關(guān)系相應(yīng)的層級中，組成當(dāng)前網(wǎng)頁下的各個(gè)組件之間的層級關(guān)系。

進(jìn)一步的，如圖5所示，所述目標(biāo)組件確定模塊406包括：

查詢子模塊502，用于查詢包含所述點(diǎn)擊位置坐標(biāo)的至少一個(gè)所述組件的平面坐標(biāo)范圍信息，選取所述平面坐標(biāo)范圍信息對應(yīng)的組件；

第一目標(biāo)組件確定子模塊504，用于將選取的至少一個(gè)所述組件中層級關(guān)系排序最前的一個(gè)所述組件作為目標(biāo)組件。

進(jìn)一步的，如圖6所示，所述目標(biāo)組件確定模塊406包括：

信息列表生成子模塊602，用于根據(jù)所述層級關(guān)系和所述平面坐標(biāo)范圍信息生成組件信息列表，所述組件信息列表中的所述平面坐標(biāo)范圍信息按照各個(gè)組件的層級由高至低排序；

比對子模塊604，用于按照層級由高至低的順序遍歷所述組件信息列表中各個(gè)組件的所述平面坐標(biāo)范圍信息，并將所述平面坐標(biāo)范圍信息與所述點(diǎn)擊位置坐標(biāo)進(jìn)行對比；

第二目標(biāo)組件確定子模塊606，用于將遍歷到的首個(gè)包含所述點(diǎn)擊位置坐標(biāo)的所述平面坐標(biāo)范圍信息對應(yīng)的組件作為目標(biāo)組件。

進(jìn)一步的，所述第二獲取模塊404具體包括：

獲取當(dāng)前網(wǎng)頁下可見范圍內(nèi)的各個(gè)所述組件之間的層級關(guān)系和各個(gè)所述組件的平面坐標(biāo)范圍信息。

在本發(fā)明實(shí)施例提供的網(wǎng)頁中目標(biāo)組件的確定裝置中，首先，利用第一獲取模塊402獲取用戶在網(wǎng)頁編輯器的隔離層上點(diǎn)擊組件的點(diǎn)擊位置坐標(biāo)；以及利用第二獲取模塊404獲取當(dāng)前網(wǎng)頁上的各個(gè)組件之間的層級關(guān)系和各個(gè)組件的平面坐標(biāo)范圍信息；然后，利用目標(biāo)組件確定模塊406在各個(gè)組件中，確定平面坐標(biāo)范圍信息包含點(diǎn)擊位置坐標(biāo)且層級關(guān)系排序最前的一個(gè)組件作為目標(biāo)組件。本發(fā)明實(shí)施例通過根據(jù)各個(gè)組件的層級關(guān)系和各個(gè)組件的平面坐標(biāo)范圍選取出平面坐標(biāo)范圍信息包含點(diǎn)擊位置坐標(biāo)且層級關(guān)系排序最前的一個(gè)組件，并將該組件作為目標(biāo)組件，從而實(shí)現(xiàn)在增加隔離層的情況下同樣可以快速、準(zhǔn)確地對網(wǎng)頁中目標(biāo)組件進(jìn)行識(shí)別并選中。

本發(fā)明實(shí)施例所提供的網(wǎng)頁中目標(biāo)組件的確定裝置可以為設(shè)備上的特定硬件或者安裝于設(shè)備上的軟件或固件等。本發(fā)明實(shí)施例所提供的裝置，其實(shí)現(xiàn)原理及產(chǎn)生的技術(shù)效果和前述方法實(shí)施例相同，為簡要描述，裝置實(shí)施例部分未提及之處，可參考前述方法實(shí)施例中相應(yīng)內(nèi)容。所屬領(lǐng)域的技術(shù)人員可以清楚地了解到，為描述的方便和簡潔，前述描述的系統(tǒng)、裝置和單元的具體工作過程，均可以參考上述方法實(shí)施例中的對應(yīng)過程，在此不再贅述。

在本發(fā)明所提供的實(shí)施例中，應(yīng)該理解到，所揭露裝置和方法，可以通過其它的方式實(shí)現(xiàn)。以上所描述的裝置實(shí)施例僅僅是示意性的，例如，所述單元的劃分，僅僅為一種邏輯功能劃分，實(shí)際實(shí)現(xiàn)時(shí)可以有另外的劃分方式，又例如，多個(gè)單元或組件可以結(jié)合或者可以集成到另一個(gè)系統(tǒng)，或一些特征可以忽略，或不執(zhí)行。另一點(diǎn)，所顯示或討論的相互之間的耦合或直接耦合或通信連接可以是通過一些通信接口，裝置或單元的間接耦合或通信連接，可以是電性，機(jī)械或其它的形式。

所述作為分離組件說明的單元可以是或者也可以不是物理上分開的，作為單元顯示的組件可以是或者也可以不是物理單元，即可以位于一個(gè)地方，或者也可以分布到多個(gè)網(wǎng)絡(luò)單元上?？梢愿鶕?jù)實(shí)際的需要選擇其中的部分或者全部單元來實(shí)現(xiàn)本實(shí)施例方案的目的。

另外，在本發(fā)明提供的實(shí)施例中的各功能單元可以集成在一個(gè)處理單元中，也可以是各個(gè)單元單獨(dú)物理存在，也可以兩個(gè)或兩個(gè)以上單元集成在一個(gè)單元中。

所述功能如果以軟件功能單元的形式實(shí)現(xiàn)并作為獨(dú)立的產(chǎn)品銷售或使用時(shí)，可以存儲(chǔ)在一個(gè)計(jì)算機(jī)可讀取存儲(chǔ)介質(zhì)中。基于這樣的理解，本發(fā)明的技術(shù)方案本質(zhì)上或者說對現(xiàn)有技術(shù)做出貢獻(xiàn)的部分或者該技術(shù)方案的部分可以以軟件產(chǎn)品的形式體現(xiàn)出來，該計(jì)算機(jī)軟件產(chǎn)品存儲(chǔ)在一個(gè)存儲(chǔ)介質(zhì)中，包括若干指令用以使得一臺(tái)計(jì)算機(jī)設(shè)備(可以是個(gè)人計(jì)算機(jī)，服務(wù)器，或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行本發(fā)明各個(gè)實(shí)施例所述方法的全部或部分步驟。而前述的存儲(chǔ)介質(zhì)包括：U盤、移動(dòng)硬盤、只讀存儲(chǔ)器(Read-Only Memory，ROM)、隨機(jī)存取存儲(chǔ)器(Random Access Memory，RAM)、磁碟或者光盤等各種可以存儲(chǔ)程序代碼的介質(zhì)。

應(yīng)注意到：相似的標(biāo)號(hào)和字母在下面的附圖中表示類似項(xiàng)，因此，一旦某一項(xiàng)在一個(gè)附圖中被定義，則在隨后的附圖中不需要對其進(jìn)行進(jìn)一步定義和解釋，此外，術(shù)語“第一”、“第二”、“第三”等僅用于區(qū)分描述，而不能理解為指示或暗示相對重要性。

最后應(yīng)說明的是：以上所述實(shí)施例，僅為本發(fā)明的具體實(shí)施方式，用以說明本發(fā)明的技術(shù)方案，而非對其限制，本發(fā)明的保護(hù)范圍并不局限于此，盡管參照前述實(shí)施例對本發(fā)明進(jìn)行了詳細(xì)的說明，本領(lǐng)域的普通技術(shù)人員應(yīng)當(dāng)理解：任何熟悉本技術(shù)領(lǐng)域的技術(shù)人員在本發(fā)明揭露的技術(shù)范圍內(nèi)，其依然可以對前述實(shí)施例所記載的技術(shù)方案進(jìn)行修改或可輕易想到變化，或者對其中部分技術(shù)特征進(jìn)行等同替換；而這些修改、變化或者替換，并不使相應(yīng)技術(shù)方案的本質(zhì)脫離本發(fā)明實(shí)施例技術(shù)方案的精神和范圍。都應(yīng)涵蓋在本發(fā)明的保護(hù)范圍之內(nèi)。因此，本發(fā)明的保護(hù)范圍應(yīng)所述以權(quán)利要求的保護(hù)范圍為準(zhǔn)。