Canvas元素不接收鼠标事件处理办法

pointer-events 属性入手

概念详细介绍可参考 : 认识 CSS pointer-events 属性_蚂蚁二娘的博客-CSDN博客

遇到的问题是:拖拽调整宽度的过程中右侧内容为canvas鼠标移入便不执行mousedown事件，导致拖拽过程中断断续续,影响用户体验。

解决办法：通过事件动态为canvas元素设置 pointer-events 属性

mouseEventLose(){
 let splitpanesSplitter = document.getElementsByClassName('splitpanes__splitter')[0]
 let canvasDom = document.querySelector('#plmviswebHost canvas')
 splitpanesSplitter.addEventListener('mousedown',(e)=>{
    canvasDom.style.pointerEvents = 'none'
 })
 splitpanesSplitter.addEventListener('mouseup',(e)=>{
    canvasDom.style.pointerEvents = 'auto'
 })
}