使用canvas时如何不影响点击页面的元素又不影响效果的展现

Posted 2023-05-10

参考技术A 大家首先想到的应该是定位降低层级，实际测试后又发现不行，如果降低层级后 canvas动画的展示被遮挡 效果不堪

这时候，pointer-events：none 就要闪亮登场了

由此看来，还是不错的

简单说下应用场景，元素应用了该 CSS 属性，链接啊，点击啊什么什么都会失效，实体虚化 玄幻啊
之前用js判断click off什么什么 可以省略了 一个属性搞定

pointer-events: none 大法好！

pointer-events:属性还有很多，很多妙用，想了解的去css3手册了解一下

隐藏属性对元素的click事件的影响

在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。一个一个看。 

{ display: none; /* 不占据空间，无法点击 */ } 
/********************************************************************************/ 
{ visibility: hidden; /* 占据空间，无法点击 */ } 
/********************************************************************************/ 
{ position: absolute; top: -999em; /* 不占据空间，无法点击 */ } 
/********************************************************************************/ 
{ position: relative; top: -999em; /* 占据空间，无法点击 */ } 
/********************************************************************************/ 
{ position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ } 
/********************************************************************************/ 
{ height: 0; overflow: hidden; /* 不占据空间，无法点击 */ } 
/********************************************************************************/ 
{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ } 
/********************************************************************************/ 
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间，可以点击 */ } 
/********************************************************************************/ 
{ 
zoom: 0.001; 
-moz-transform: scale(0); 
-webkit-transform: scale(0); 
-o-transform: scale(0); 
transform: scale(0); 
/* IE6/IE7/IE9不占据空间，IE8/FireFox/Chrome/Opera占据空间。都无法点击 */ 
} 
/********************************************************************************/ 
{ 
position: absolute; 
zoom: 0.001; 
-moz-transform: scale(0); 
-webkit-transform: scale(0); 
-o-transform: scale(0); 
transform: scale(0); 
/* 不占据空间，无法点击 */ 
} 

来自为知笔记(Wiz)