Tag: Js | Sparkle的个人博客

### 实现

一段最简单的clickoutside方案。其中contains兼容到IE9

```javascript
function clickOutsideListener(targetDom, clickOutsideFn) {
        this.handler = function(e){   
            if (!targetDom.contains(e.target)){
              // Clicked outside the box
              clickOutsideFn && clickOutsideFn()
            }
        }
    }
    clickOutsideListener.prototype.add = function() {
        document.addEventListener('click', this.handler)
    };
    clickOutsideListener.prototype.remove = function (){
        document.removeEventListener('click', this.handler)
    }
```

那么我们在绑定的时候，就会通过类似的代码：

```javascript
var $ = document.querySelector;
if ($('#menu')) $('#menu').addEventListener('mouseleave', mouseLeaveHandler);
```

这里要注意，如果你的鼠标移开事件元素内部有如select这一类的元素那可能在部分浏览器（如火狐）会有兼容性问题，解决方案：

```javascript
function mouseLeaveHandler(e) {
	if (e.relatedTarget === null) return;
	// handler logic..
}
```

### 原因

`relatedTarget`是鼠标次要事件，因此和鼠标的一些行为（mouse*）密切相关，MDN给出的对应关系请见：

[MDN - relatedTarget](https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/relatedTarget)

在本次排查中，正是select点开菜单后，在Firefox下，移动到菜单内是一个丢失了relatedTarget的mouse事件，因此可以直接return掉来避免后续执行。

除此以外，mouseover和mouseout著名的bug，即进入mouseover元素的节点，会触发一次mouseout事件和一次mouseover事件，这时就会出现mouseout到里层节点（e.relatedTarget = 里层节点），紧接着mouseover到当前节点（e.relatedTarget = 当前节点），即出现了从自己mouseover到自己的bug。

### 其他实现

[VueUse库](https://github.com/vueuse/vueuse/blob/main/packages/core/onClickOutside/index.ts) 

使用的`composedPath`，兼容到IE11，如果需要更好的兼容性请见：https://gist.github.com/sibbng/13e83b1dd1b733317ce0130ef07d4efd
