為什么我得到了錯誤的offsetwidth和增加的尺寸？

Question

• 在此說明底部的以下鏈接中，我試圖制作一個掩碼框，其中合並了HTMLElement的尺寸，在該尺寸上單擊了鼠標。
• 但是，單擊頁面上的任何元素時，多次單擊同一位置時，寬度和高度都會以某種方式增加。
• 編輯-掩碼div的“寬度”和“高度”也大於原始元素。
• 在對象“ AspectViewport”的所有函數都出現了被稱為該自動遞增問題的函數“ scaleChange”中，但是即使注釋了“ top”的一個函數“ left”也不會出現。
• 我花了數小時試圖弄清楚這個問題，這是我最后的希望。

編輯：是的，規模本身就是針對性的，我知道，但是即使這樣，尺寸也不應該增加。

JSFiddle以下是JS

var AspectViewport = function(parameter){

    var elementObject = null,
        elementParent = null,
        _element = null,
        left = 0, _scrollLeft = 0,
        top = 0, _scrollTop = 0;

    function main(parameter){
        _element = parameter;
    }

    main.fn = main.prototype;

    main.fn.left = function(){
        left = 0, _scrollLeft = 0, elementObject = _element;
        while(elementObject){
            left = left + elementObject.offsetLeft;
            elementObject = elementObject.offsetParent;
        }
        for(elementParent = _element.parentNode ; elementParent != null && elementParent.nodeType == 1 ; elementParent = elementParent.parentNode){
            _scrollLeft = _scrollLeft + elementParent.scrollLeft;
        }
        return (_scrollLeft + (left - _scrollLeft));
    };
    main.fn.top = function(){
        top = 0, _scrollTop = 0, elementObject = _element;
        while(elementObject){
            top = top + elementObject.offsetTop;
            elementObject = elementObject.offsetParent;
        }
        for(elementParent = _element.parentNode ; elementParent != null && elementParent.nodeType == 1 ; elementParent = elementParent.parentNode){
            _scrollTop = _scrollTop + elementParent.scrollTop;      
        }
        return (_scrollTop + (top - _scrollTop));
    };
    main.fn.right = function(){
        return _element.offsetWidth + this.left();
    };
    main.fn.bottom = function(){
        return _element.offsetHeight + this.top();
    };
    main.fn.width = function (){
        //console.log("aspect:"+_element.offsetWidth);
        return _element.offsetWidth;
    };
    main.fn.height = function (){
        return _element.offsetHeight;
    };

    return new main(parameter);
};

function scaleChange(obj){
    var scale = document.getElementById('scl');

    console.log(obj.width()  +" "+obj.height() +" "+ obj.left()  +" "+obj.top());

    scale.style.width = obj.width()+'px';

    scale.style.height = obj.height()+'px';

    scale.style.left = obj.left()+'px';

    scale.style.top = obj.top()+'px';
}
function getTarget(e){
    e = e || window.event;
    var targ;
    if (e.target) { targ = e.target; }
    else if (e.srcElement) { targ = e.srcElement; }
    if (targ.nodeType == 3) { targ = targ.parentNode; }
    return targ;
}

document.body.onclick = function(e){
    var _target = getTarget(e);
    if(_target.nodeName !== 'BODY'){
        var c = document.getElementById('console');
        var co = AspectViewport(_target);
        scaleChange(co);
        c.innerHTML = " left:" + co.left() + " top:" + co.top() + " right:" + co.right() + " width:" + co.width();
    }
};

Answer 1

您沒有添加檢查以防止縮放本身。

我的解決方法是在定位比例時將目標更改為主體（因為您的代碼始終拒絕主體）。 當然，無論出於何種原因都無法使用CSS時，這是一種解決方案。

function getTarget(e){
  e = e || window.event;
  var targ;
  if (e.target) { targ = e.target; }
  else if (e.srcElement) { targ = e.srcElement; }
  if (targ.nodeType == 3) { targ = targ.parentNode; }
  if (targ.id === "scl") {targ = document.body; }
  return targ;
}

Answer 2

問題

當scl div移動到同一元素上時，您實際上是在點擊scl元素-它以自身為目標，因此使其自身更大。

就其本身而言，這不應引起增量。 但是，請記住， width和height包括元素的borders ， padding和margin 。 每次點擊時，每個尺寸的尺寸會增加2px ，因為每種尺寸的邊框都有1px的邊框，該邊框已添加到元素中。

解決方案

簡單說明一下：

#scl {
    pointer-events:none;
}

在您的CSS代碼中，這意味着指針事件將貫穿該元素，因此它永遠無法成為目標對象（即， pointer-events:none;意味着應該不可能用鼠標單擊元素），這應該可以解決您的問題。

pointer-events工作小提琴

但是，如果確實希望元素可單擊，則可以聲明您希望元素的width和height始終包含邊框，填充和邊距。 您也可以在CSS中執行此操作。

#scl {
    box-sizing:border-box;
}

適用於box-sizing小提琴

筆記

有關pointer-events和box-sizing更多信息，請參見MDN。