JavaScript判断元素位置关系的简单示例

前端之家收集整理的这篇文章主要介绍了JavaScript判断元素位置关系的简单示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
感兴趣的小伙伴,下面一起跟随编程之家 jb51.cc的小编来看看吧。
在很多场景下,要判断一个元素是不是包含另一个元素,总结了一下,有下列的方法

一,遍历节点树,这个方法是最容易的,也没有什么兼容性问题。在“mouseenter和mouseleave”这篇日志中有演示,可以看一下。

二,对于IE浏览器,DOM元素有个contains的方法可以判断包含关系。比如div1.contains(div2),如果返回的结果为true就说明div1包含了div2,反之亦然。

三,DOM3的Node.compareDocumentPosition方法
(div1.compareDocumentPosition(div2) & 0x10) === 0x10如果为true的话,说明div1包含div2。
详细的文档见:https://developer.mozilla.org/en/DOM/Node.compareDocumentPosition

四,强大的位置关系函数。 JS代码如下:

// 来自:编程之家 jb51.cc(jb51.cc)
// Compare Position - MIT Licensed,John Resig
function comparePosition(a,b){
 return a.compareDocumentPosition ?
 a.compareDocumentPosition(b) :
 a.contains ?
  ( a != b && a.contains(b) && 16 ) +
  ( a != b && b.contains(a) && 8 ) +
  ( a.sourceIndex >= 0 && b.sourceIndex >= 0 ?
   (a.sourceIndex < b.sourceIndex && 4 ) +
   (a.sourceIndex > b.sourceIndex && 2 ) :
   1 ) :
  0;
}
原文链接:https://www.f2er.com/js/527658.html

猜你在找的JavaScript相关文章