JavaScript判断元素位置关系的解决办法

内容摘要

这篇文章主要为大家详细介绍了JavaScript判断元素位置关系的简单示例，具有一定的参考价值，可以用来参考一下。

对此感兴趣的朋友，看看idc笔记做的技术笔记。在很多场景下，要判

文章正文

这篇文章主要为大家详细介绍了JavaScript判断元素位置关系的简单示例，具有一定的参考价值，可以用来参考一下。

对此感兴趣的朋友，看看idc笔记做的技术笔记。在很多场景下，要判断一个元素是不是包含另一个元素，总结了一下，有下列的方法：一，遍历节点树，这个方法是最容易的，也没有什么兼容性问题。在“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代码如下：


// 来自：php教程（www.idcnote.com）
// 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;
}

注：关于JavaScript判断元素位置关系的简单示例的内容就先介绍到这里，更多相关文章的可以留意

代码注释

上一篇 Python collections.defaultdict() 与 dict用法示例下一篇 Python 列表类型的所有方法示例

作者：喵哥笔记

学的不仅是技术，更是梦想！