在模仿淘寶放大鏡效果時, 發現mask層一直抖動, 紅色方框添加了onmousemove事件, 內部用到了offsetX 最后解決方案是給mask添加css屬性: pointer-events: none;
<div class="outer"> <div.mask></div> </div>
原本我是想讓outer作為參考系獲得offsetX和offsetY的值, 所以把onmousemove事件響應函數添加到outer上, 可是這樣做僅僅代表,事件冒泡到outer層才會執行回調函數, offsetX參考系並不是outer, 其實event.offsetX是以event.target(事件觸發的節點)作為參考系的,所以把事件添加給誰都沒用,參考系始終是事件觸發節點,
本例中, 由於mask是紅色的outer盒子的子元素,所以事件的觸發節點一定是在mask,參考系始終是mask.
給mask添加css屬性pointer-events: none; 可以讓mask層不參與鼠標事件, 這樣event.target才是outer, 參考系才可以變成outer
(pointer-events可以繼承)