javascript - 为什么我的属性失去定义？ (JS)

Question

我正在创建一个拖/放重型页面，并为每个可拖动元素提供 defaultTop 和 defaultLeft 属性，以便我可以轻松地将其重置到原始位置。这本来很好并且没什么值得注意的，直到突然，重置函数将它们的值报告为未定义。由于这些部件损坏时我没有对其进行处理(它们已经工作了一段时间)，所以我不确定我哪里出了问题。感谢您的帮助。

创建元素的函数是:

function makeTool(id, imgURL, defaultL, defaultT,trayname){
var a=document.createElement('img');
a.setAttribute('src', imgURL);
a.setAttribute('id',id);
a.setAttribute('class','drag');
a.intray=true;
a.tray=trayname;
a.rotation=0;
a.style.zIndex=document.getElementById(trayname).style.zIndex+1;
document.getElementById(trayname).appendChild(a);
a.defaultTop=ExtractNumber(document.getElementById(trayname).style.top)+defaultT;
a.defaultLeft=ExtractNumber(document.getElementById(trayname).style.left)+defaultL;
a.style.top=a.defaultTop+'px';
a.style.left =a.defaultLeft+'px';
a.addEventListener('touchstart', function(e) { return self.touchStart(e) }, false);
a.addEventListener('gesturestart', function(e) { return self.gestureStart(e) }, false);
a.addEventListener('touchmove', function(e) { return self.touchMove(e) }, false);
a.addEventListener('touchend', function(e) { return self.touchEnd(e) }, false);
tools.push(a);
return a;
}

重置函数是:

function reposition(t){
    console.log(t+' top: '+document.getElementById(t).defaultTop);
    document.getElementById(t).style.left=document.getElementById(t).defaultLeft+'px';
    document.getElementById(t).style.top=document.getElementById(t).defaultTop+'px';
}

这是我获取未定义日志的地方

Answer 1

我不确定这是否有帮助，但我也遇到了类似的问题。

我正在编写一个对象来根据我的innerWidth计算DIV的宽度:

function ScreenGrid() {
'use strict';

this.ColumnIDs = new Array();
this.Widths = new Array();
this.Dynamic = true;
this.Set = adjust;

var ColumnIDsPersist;
var WidthsPersist;

function adjust() {

    //stuff

    for (var i = 0; i < ColumnIDsPersist.length; i++) {

调整函数是魔法发生的地方。为了确保 DIV 始终适合屏幕，我使用了以下代码:

if (window.addEventListener) {
            // Good browsers.
            window.addEventListener('resize', react, false);
        }
        else if (w.attachEvent) {
            // Legacy IE support.
            window.attachEvent('onresize', react);
        }
        else {
            // Old-school fallback.
            window.onresize = react;
        }

这是 react 函数:

    // Slight delay.
function react() {

    // Clear the timer as window resize fires,
    // so that it only calls adapt() when the
    // user has finished resizing the window.
    clearTimeout(timer);

    // Start the timer countdown.
    timer = setTimeout(adjust, 16);
    // -----------------------^^
    // Note: 15.6 milliseconds is lowest "safe"
    // duration for setTimeout and setInterval.
    //
    // http://www.nczonline.net/blog/2011/12/14/timer-resolution-in-browsers
}

问题是每次 REACT 触发时，o 在 this.ColumnIDs 中都未定义。经过大量调查后，我注意到当我从 SET() 中触发 ADJUST 时，对象 THIS 是我的 SCREENGRID，但是当我从 REACT 中触发时，它变成了 WINDOW，所以我在 this.ColumnIDs 中未定义。

我用这段代码解决了:

function ScreenGrid() {
'use strict';

this.ColumnIDs = new Array();
this.Widths = new Array();
this.Dynamic = true;
this.Set = adjust;

var ColumnIDsPersist;
var WidthsPersist;

function adjust() {

    // This clearTimeout is for IE.
    // Really it belongs in react(),
    // but doesn't do any harm here.
    clearTimeout(timer);

    // Parse browser width.
    var _width = window.innerWidth || window.document.documentElement.clientWidth || window.document.body.clientWidth || 0;
    var _heigth = window.innerHeight || window.document.documentElement.clientHeight || window.document.body.clientHeight || 0;
    var _usedWidth = 0;
    var _fluidColumn = null;


    //Ao chamar a função adjust novamente no evento on resize, o objeto THIS deixa de ser a função e passa a ser a janela,
    //Essas vareáveis garantem a persistencia dos dados a serem utilizados.
    ColumnIDsPersist = (typeof ColumnIDsPersist == 'undefined') ? this.ColumnIDs : ColumnIDsPersist;
    WidthsPersist = (typeof WidthsPersist == 'undefined') ? this.Widths : WidthsPersist;

    for (var i = 0; i < ColumnIDsPersist.length; i++) {

好了，就是这样，希望对你有帮助!