原生JS offsetX和offsetY引起抖動

2022-08-26 18:57:12 字數 696 閱讀 6125

在模仿**放大鏡效果時, 發現mask層一直抖動, 紅色方框新增了onmousemove事件, 內部用到了offsetx 最後解決方案是給mask新增css屬性: pointer-events: none; 

原本我是想讓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可以繼承)

如何用原生js封裝jQuery中的offset方法

這個方法是基於原生js中的 offsetparent offsettop offsetleft clientleft clienttop 來完成的,在jquery中這個元素是用來獲取當前元素在當前視口的相對偏移。clientleft clienttop 指的是元素父元素左邊框和上邊框 包括borde...

泛型和原生型別

泛型類的內部類可以訪問到其外圍類的型別引數。當你在乙個泛型類中巢狀另乙個泛型類時,最好為它們的型別引數設定不同的名字,即使那個巢狀類是靜態的也應如此。class linkedlist public void add e e public void dump 使用靜態類 private nodehea...

原生JS 和 的區別

1 如果型別不同,就 不相等 2 如果兩個都是數值,並且是同乙個值,那麼 相等 3 如果兩個都是字串,每個位置的字元都一樣,那麼 相等 否則 不相等 4 如果兩個值都是true,或者都是false,那麼 相等 5 如果兩個值都引用同乙個物件或函式,那麼 相等 否則 不相等 6 如果兩個值都是null...