pointer-events:none 让元素实体虚化，即海市蜃楼

注意：键盘事件无法过滤

a 标签应用 disabled 可以禁用键盘事件（避开tab键的索引）【绝大多数浏览器】

禁用a标签链接或按钮的完美组合是：pointer-events:none & without href

兼容性

FireFox浏览器，Chrome都支持

pointer-events扩展之浏览器支持的JS判断

1
2
3
4
5
6
7
8
9
10
var supportsPointerEvents = (function(){
  var dummy = document.createElement('_');
  if(!('pointerEvents' in dummy.style)) return false;
  dummy.style.pointerEvents = 'auto';
  dummy.style.pointerEvents = 'x';
  document.body.appendChild(dummy);
  var r = getComputedStyle(dummy).pointerEvents === 'auto';
  document.body.removeChild(dummy);
  return r;
})();

pointer-events扩展之幻影特性的JS替代实现

1
2
3
4
5
6
7
8
9
10
11
function noPointerEvents (element) {
    $(element).bind('click mouseover', function (evt) {
        this.style.display = 'none';
        var x = evt.pageX, y = evt.pageY,
	    under = document.elementFromPoint(x, y);
        this.style.display = '';
        evt.stopPropagation();
        evt.preventDefault();
        $(under).trigger(evt.type);
    });
}