Question

在本说明书底部的以下链接中，我试图制作一个掩模框，其中包含鼠标点击其上的HTMLElement的尺寸。
但是点击页面上的任何元素时，无论如何，当多次点击相同的地点时，宽度和高度会增加。
编辑 - 也是＆＃39;宽度＆＃39;和＆＃39;身高＆＃39;掩码div的大于原始元素。
在函数＆＃34; scaleChange＆＃34;当对象的所有功能＆＃34; AspectViewport＆＃34;这种自动增量问题就出现了，但即使是一个功能，也不会出现这种问题。＆＃34; top＆＃34;被注释掉了。
我花了好几个小时试图解决这个问题StackOverflow是我最后的希望。

编辑：是的，比例尺本身就是目标，我知道它，但即使这样，尺寸也不会增加。

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在元素上包含边框，填充和边距。每次点击每个维度都会增加2px，因为每个尺寸都有1px个边框，而这个边框正在添加到元素中。

解决方案

简单说明：

#scl {
    pointer-events:none;
}

CSS代码中的

意味着指针事件将通过元素落下，因此它永远不会被定位（即pointer-events:none;意味着它应该 不可能 使用鼠标光标单击元素）这可以解决您的问题。

Working Fiddle for pointer-events

但是，如果您确实希望元素可以点击，则可以只声明您希望元素的width和height始终包含边框，填充和边距。您也可以在CSS中执行此操作。

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

Working Fiddle for box-sizing

备注

有关pointer-events和box-sizing的更多信息，请访问MDN。

为什么我得到不正确的偏移宽度和增加的尺寸？

2 个答案:

问题

解决方案

备注