跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明

下面是关于“跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明”的详细攻略：

跨浏览器的 mouseenter 和 mouseleave 事件

什么是 mouseenter 和 mouseleave 事件？

mouseenter 和 mouseleave 事件是鼠标移入和移出事件，在鼠标移入或移出一个元素时触发。但是这两个事件与 mouseover 和 mouseout 事件的不同之处在于，当鼠标在元素内部移动时，mouseenter 和 mouseleave 事件不会触发，而 mouseover 和mouseout 事件会不停地被触发。

解决跨浏览器兼容性问题的方法

由于不同浏览器对于 mouseenter 和 mouseleave 事件的实现有所不同，所以我们需要在代码中做一些兼容性处理。

这里提供一种常见的解决方法：

function addEvent (element, eventName, callback) {
  if (element.addEventListener) {
    element.addEventListener(eventName, callback, false);
  } else if (element.attachEvent) {
    element.attachEvent('on' + eventName, callback);
  } else {
    element['on' + eventName] = callback;
  }
}

function removeEvent (element, eventName, callback) {
  if (element.removeEventListener) {
    element.removeEventListener(eventName, callback, false);
  } else if (element.detachEvent) {
    element.detachEvent('on' + eventName, callback);
  } else {
    element['on' + eventName] = null;
  }
}

function getRelatedTarget (event) {
  if (event.relatedTarget) {
    return event.relatedTarget;
  } else if (event.toElement) {
    return event.toElement;
  } else if (event.fromElement) {
    return event.fromElement;
  } else {
    return null;
  }
}

function isContained (parent, child) {
  if (parent.contains) {
    return parent.contains(child);
  } else if (parent.compareDocumentPosition) {
    return !!parent.compareDocumentPosition(child) & 16;
  } else {
    var node = child.parentNode;
    while (node) {
      if (node === parent) {
        return true;
      }
      node = node.parentNode;
    }
    return false;
  }
}

function mouseenter (element, callback) {
  addEvent(element, 'mouseover', function (event) {
    var relatedTarget = getRelatedTarget(event);
    if (!isContained(element, relatedTarget) && element !== relatedTarget) {
      callback.call(element, event);
    }
  });
}

function mouseleave (element, callback) {
  addEvent(element, 'mouseout', function (event) {
    var relatedTarget = getRelatedTarget(event);
    if (!isContained(element, relatedTarget) && element !== relatedTarget) {
      callback.call(element, event);
    }
  });
}

示例

这里提供两个示例，分别演示 mouseenter 和 mouseleave 的用法：

示例一

在鼠标移入一个菜单项时，显示子菜单：

<ul id="menu">
  <li>菜单1
    <ul>
      <li>子菜单1</li>
      <li>子菜单2</li>
    </ul>
  </li>
  <li>菜单2
    <ul>
      <li>子菜单3</li>
      <li>子菜单4</li>
    </ul>
  </li>
</ul>

<script>
  var menuItems = document.querySelectorAll('#menu > li');
  var subMenus = document.querySelectorAll('#menu > li > ul');

  for (var i = 0; i < menuItems.length; i++) {
    (function (menuItem, subMenu) {
      mouseenter(menuItem, function () {
        subMenu.style.display = 'block';
      });

      mouseleave(menuItem, function () {
        subMenu.style.display = 'none';
      });
    })(menuItems[i], subMenus[i]);
  }
</script>

示例二

在鼠标移入一个链接时，显示链接的标题：

<a href="http://example.com" title="这是一个示例链接">示例链接</a>

<script>
  var link = document.querySelector('a');
  var title = link.getAttribute('title');

  mouseenter(link, function () {
    this.innerHTML = title;
  });

  mouseleave(link, function () {
    this.innerHTML = '示例链接';
  });
</script>

compareDocumentPosition 的使用说明

什么是 compareDocumentPosition？

compareDocumentPosition 是一个用于比较两个节点在文档树中位置关系的方法。它可以返回以下值：

• 1：节点在目标节点之前
• 2：节点在目标节点之后
• 4：节点包含目标节点
• 8：节点被目标节点包含
• 16：节点与目标节点是同一个节点

示例

下面是一个使用 compareDocumentPosition 比较两个节点位置的示例：

<p>
  <strong>这是一个示例段落</strong>
</p>

<script>
  var p = document.querySelector('p');
  var strong = document.querySelector('strong');

  var result = p.compareDocumentPosition(strong);

  switch (result) {
    case 1:
      console.log('strong 在 p 前面');
      break;
    case 2:
      console.log('strong 在 p 后面');
      break;
    case 4:
      console.log('strong 包含在 p 内部');
      break;
    case 8:
      console.log('p 包含在 strong 内部');
      break;
    case 16:
      console.log('strong 和 p 是同一个节点');
      break;
  }
</script>