一文詳解Node.contain?函數(shù)兼容處理
前言
好久不寫文章了,都不知道跟大家怎么打招呼了,新的一年開始,也應(yīng)該收心,做一些文字的記錄以及分享了。
先說下寫這篇文章的由來吧,接到一個需求需要在項目中實現(xiàn)一個效果,就是點擊其他區(qū)域隱藏dom的操作,試了很多的方式,感覺都不是特別合理,所以針對當前需求做了一個方法的實現(xiàn),使用dom原生方法 contains進行判斷當前點擊的元素是否是指定父級的子級,然后進行判斷是否隱藏指定元素。
具體業(yè)務(wù)邏輯方法就不在這里贅述了,主要講下contains方法。
contains方法
Node 接口的 contains() 方法返回一個布爾值,表示一個節(jié)點是否是給定節(jié)點的后代,即該節(jié)點本身、其直接子節(jié)點(childNodes)、子節(jié)點的直接子節(jié)點等。
otherNode
要測試的節(jié)點。
備注: otherNode 不是可選的,但是可以設(shè)置為 null。
返回一個布爾值,如果 otherNode 包含在節(jié)點中會返回 true,否則返回 false。
如果 otherNode 參數(shù)為 null,則 contains() 始終返回 false。
下面的函數(shù)用來檢查一個元素是否是 body 元素的后代元素。由于 contains 會包含元素自身,而確定 body 是否包含自身不是設(shè)計 isInPage 的意圖,這種情況明確返回 false。
function isInPage(node) {
return (node === document.body) ? false : document.body.contains(node);
}
| Specification |
|---|
| DOM Standard # ref-for-dom-node-contains① |
Report problems with this compatibility data on GitHub
| desktop | mobile | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on iOS | Samsung Internet | WebView Android | |
| contains | 16Toggle history | 12Toggle history | 9Toggle history | 7Toggle history | 1.1Toggle history | 18Toggle history | 9Toggle history | 10.1Toggle history | 1Toggle history | 1.0Toggle history | 4.4Toggle history |
兼容處理
因為是原生方法,兼容性有限,所以針對公司的項目兼容需求,還需要進行兼容處理。具體代碼如下:
const contains = (root, el) => {
if (root.compareDocumentPosition) return root === el || !!(root.compareDocumentPosition(el) & 16);
if (root.contains && el.nodeType === 1) {
return root.contains(el) && root !== el;
}
while ((el = el.parentNode)) if (el === root) return true;
return false;
};
這段代碼實現(xiàn)了一個檢測節(jié)點是否存在于指定容器中的函數(shù)contains,其中使用了三種不同的方式進行判斷:
- 如果瀏覽器支持
compareDocumentPosition方法,則直接使用該方法進行判斷。首先判斷root節(jié)點是否等于el節(jié)點,如果是,則返回true;否則,使用compareDocumentPosition方法判斷el節(jié)點是否在root節(jié)點中,如果結(jié)果為16,則返回true,否則返回false。 - 如果瀏覽器不支持
compareDocumentPosition方法,但支持contains方法,則判斷el節(jié)點是否是一個元素節(jié)點(nodeType為1),如果是,則使用contains方法判斷el節(jié)點是否在root節(jié)點中,并且root節(jié)點不等于el節(jié)點,如果滿足,則返回true,否則返回false。 - 如果瀏覽器既不支持
compareDocumentPosition方法,也不支持contains方法,則使用while循環(huán)遍歷el節(jié)點的所有祖先節(jié)點,判斷是否有節(jié)點等于root節(jié)點,如果有,則返回true,否則返回false。
綜合三種方式,可以實現(xiàn)在各種瀏覽器中兼容檢測節(jié)點是否存在于指定容器中的功能。
總結(jié)
方法整體的實現(xiàn)難度不是很大,就是針對當前原生方法的不支持的內(nèi)容進行補充,
以上就是一文詳解Node.contain 函數(shù)兼容處理的詳細內(nèi)容,更多關(guān)于Node.contain 函數(shù)兼容的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
5分鐘教你用nodeJS手寫一個mock數(shù)據(jù)服務(wù)器的方法
這篇文章主要介紹了5分鐘教你用nodeJS手寫一個mock數(shù)據(jù)服務(wù)器的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
配置node服務(wù)器并且鏈接微信公眾號接口配置步驟詳解
這篇文章主要介紹了配置node服務(wù)器并且鏈接微信公眾號接口配置步驟詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,,需要的朋友可以參考下2019-06-06
node.js中express中間件body-parser的介紹與用法詳解
這篇文章主要給大家介紹了關(guān)于node.js中express中間件body-parser的相關(guān)資料,文章通過示例代碼介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面來一起看看吧。2017-05-05
利用nginx + node在阿里云部署https的步驟詳解
這篇文章主要給大家介紹了關(guān)于利用nginx + node在阿里云部署https的步驟,文中通過圖文及示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧。2017-12-12
Windows 系統(tǒng)下安裝和部署Egret的開發(fā)環(huán)境
Egret基于TypeScript開發(fā)的,而TypeScript編譯工具tsc是基于Node.js 開發(fā)的。所以在安裝過程中,我們先需要對于基礎(chǔ)支持工具進行安裝。2014-07-07

