js用普通DIV模拟A标签

当节点为A标签时（即anchor tag超链接元素），鼠标中键无法在其上触发自动滚动。

比如浏览器再带的书签管理器，会在左右设计空白区域，只能在空白区域触发中键滚动，但如果没有这么多空间的话（比如扩展弹出窗口），就需要用DIV标签模拟A标签。

模拟拖拽

本以为最难，但观察书签管理器后发现，答案出乎意料地简单，只需两步：

el.draggable=true;
el.ondragstart = (e) => {
	e.dataTransfer.setData('text', href);
};
1
2
3
4

dom节点的draggable属性，一旦启用即可拖拽，自动生成拖拽预览图，无需调用DataTransfer.setDragImage，缺点是默认预览图有点大。

在 ondragstart 中填写数据，键名可以是’text’或者’url’。

用鼠标中键在后台打开超链接

打开超链接：

	window.open(url)
1

如果在点击鼠标中键时调用，则自动在后台打开，这是浏览器的特性。

需要同时监听mousedown和mouseup。mousedown可挂在元素上面，但是当鼠标离开元素时会丢失mouseup事件，所以mouseup要挂在document上面才行。

模拟拖拽其实是最简单的，最多十分钟。之后处理鼠标中键才是最难的，因为鼠标中键有两个功能：浏览器自动滚动/中键点击。触发后者的同时也会触发自动滚动（鼠标指针为方向盘），除非完全禁用元素之上的自动滚动功能：

el.onmousedown=()=>{
	return false // 禁止自动滚动
	// 返回false和无返回值的效果不同……
}
1
2
3
4

但是，本例希望保留自动滚动功能，如何两者兼得？测试发现弹出popup窗口，然后立即关闭，即可中断自动滚动。（并非完美，而且如果本身就处于popup窗口，则窗口会立即关闭，无法改变）

程序化弹出popup窗口后立即关闭：

chrome.browserAction.openPopup(function(e){
	if(e)e.close(); // 打个酱油
});        
1
2
3

双击后前台打开超链接

el.ondblclick = ()=>{
	window.open(url)
}
1
2
3

浏览器会自动选择在前台打开url。

GIF效果图

本人还设计在中键滚动之时保持起始行的高亮背景，使上下文分明。效果如下：