js中事件冒泡和捕獲的坑

一、事件捕獲

二、事件冒泡

1. 在下面的大圖查看中，要求點擊圖片之外的部分和叉叉關閉大圖查看，點擊圖片部分沒有效果
   

 <div className="editour-pic-big" ref={r => this.imgRef = r} >
                <div className="pop_mask"  ></div>
                <div className="pop_imgbig" onClick={handleHidePreviewImg}>
                    <i className="pop-close" onClick={handleHidePreviewImg}></i>
                    <div className="imgbox" onClick={e=>{e.stopPropagation()}}>
                        <img
                            style={{
                                width: '100%'
                            }}
                            // src={formatSingleImage(previewImg, IMAGE_SIZE)} />
                            src={previewImg}/>
                    </div>
                </div>
            </div>

如果dom結構如上圖，我們可以通過在最外層添加點擊事件的事件處理器同時阻止圖片dom的默認冒泡行爲來實現想要的效果（參考：https://segmentfault.com/a/1190000005749055）

3、補充一個csss屬性的使用

pointer-events:none：https://blog.csdn.net/qq_42606051/article/details/81808133