Javascript 从Browserify模块访问DOM时出现问题_Javascript_Html_Svg_Browserify

Javascript 从Browserify模块访问DOM时出现问题

javascript html svg

Javascript 从Browserify模块访问DOM时出现问题,javascript,html,svg,browserify,Javascript,Html,Svg,Browserify,我有一个包含大量SVG元素的html文档。某些元素需要附加事件处理程序，我希望在专用的browserify模块中实现这一点（这是一个编程类的游戏）。我的HTML标记通常如下所示：  <g id="Health_Plus"> <rect x='72' y='184' width='20' height='20' fill-opacity='0' /> <line fill="none" strok

我有一个包含大量SVG元素的html文档。某些元素需要附加事件处理程序，我希望在专用的browserify模块中实现这一点（这是一个编程类的游戏）。我的HTML标记通常如下所示：

<!-- Health Stuff -->
<g id="Health_Plus">
    <rect x='72' y='184' width='20' height='20' fill-opacity='0' /> 
    <line fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" x1="82.223" y1="186.167" x2="82.223" y2="202.167"/>
    <line fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" x1="89.723" y1="194.167" x2="74.723" y2="194.167"/>
</g>
<g id="Health_Minus">
    <rect x='74.723' y='210' width='15' height='10' fill-opacity='0'/>
    <line fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" x1="89.723" y1="213.833" x2="74.723" y2="213.833"/>
</g>
<g id="Health_Icon">
    <line fill="none" stroke="#EC1C24" stroke-width="11" stroke-miterlimit="10" x1="61.504" y1="128.726" x2="61.504" y2="177.716"/>
    <line fill="none" stroke="#EC1C24" stroke-width="11" stroke-miterlimit="10" x1="37.01" y1="153.221" x2="86" y2="153.221"/>
</g>
<g>
    <text id='Health_Text' x='40' y='210' font='sans-serif' font-size='25'>10</text>
</g>

module.exports = (function ()
{
    // function StatsManager = {};

    function StatsManager ()
    {
        //////////////////////////////////////
        // Value for outputting debug code. //
        //////////////////////////////////////
        this.DEBUG = true;

        //////////////////////////////////////
        // Default values for start of game //
        //////////////////////////////////////
        this.startingAttackVal = 5;
        this.startingDefenseVal = 5;
        this.startingHealthVal = 5;

        this.attackCap = 10;
        this.defenseCap = 10;
        this.healthCap = 10;

        this.attackFloor = 1;
        this.defenseFloor = 1;
        this.healthFloor = 1;

        ///////////////////
        // Actual values //
        ///////////////////
        this.attackVal = this.startingAttackVal;
        this.defenseVal = this.startingDefenseVal;
        this.healthVal = this.startingHealthVal;

        //////////////////////////////////////////////////////
        // Hooks to all the UI buttons in the stats manager //
        //////////////////////////////////////////////////////
        this.attackPlus = document.getElementById('Attack_Plus');
        this.attackPlus.addEventListener('click', self.AttackPlus);

        this.attackMinus = document.getElementById('Attack_Minus');
        this.attackMinus.addEventListener('click', this.AttackMinus);

        this.defensePlus = document.getElementById('Defense_Plus');
        this.defensePlus.addEventListener('click', this.DefensePlus);

        this.defenseMinus = document.getElementById('Defense_Minus');
        this.defenseMinus.addEventListener('click', this.DefenseMinus);

        this.healthPlus = document.getElementById('Health_Plus');
        this.healthPlus.addEventListener('click', this.HealthPlus);

        this.healthMinus = document.getElementById('Health_Minus');
        this.healthMinus.addEventListener('click', this.HealthMinus);

        this.specialUp = document.getElementById('Special_Up');
        this.specialUp.addEventListener('click', this.SpecialUp);

        this.specialDown = document.getElementById('Special_Down');
        this.specialDown.addEventListener('click', this.SpecialDown);

        //////////////////////////////
        // Assignment of the values //
        //////////////////////////////
        this.attackText = document.getElementById('Attack_Text');
        this.attackText.textContent = this.attackVal;

        this.defenseText = document.getElementById('Defense_Text');
        this.defenseText.textContent = this.defenseVal;

        this.healthText = document.getElementById('Health_Text');
        this.healthText.textContent = this.healthVal;
    }

    StatsManager.prototype.AttackPlus = function() 
    {
        if (this.DEBUG) { console.log("Attack +1 Clicked"); }
        if (this.attackVal < this.attackCap)
        {
            this.attackVal++;
            this.attackText.textContent = this.attackVal;
        }
    }

    StatsManager.prototype.AttackMinus = function() 
    {
        if (this.DEBUG) { console.log("Attack -1 Clicked"); }
        if (this.attackVal > this.attackFloor)
        {
            this.attackVal--;
            this.attackText.textContent = this.attackVal;
        }
    }

    StatsManager.prototype.DefensePlus = function() 
    {
        if (this.DEBUG) { console.log("Defense +1 Clicked") }
        if (this.defenseVal < this.defenseCap)
        {
            this.defenseVal++;
            this.defenseText.textContent = this.defenseVal;
        }
    }

    StatsManager.prototype.DefenseMinus = function() 
    {
        if (this.DEBUG) { console.log("Defense -1 Clicked") }
        if (this.defenseVal > this.defenseFloor)
        {
            this.defenseVal--;
            this.defenseText.textContent = this.defenseVal;
        }
    }

    StatsManager.prototype.HealthPlus = function() 
    {
        if (this.DEBUG) { console.log("Health +1 Clicked"); }
        if (this.healthVal < this.healthCap)
        {
            this.healthVal++;
            this.healthText.textContent = this.healthVal;
        }
    }


    StatsManager.prototype.HealthMinus = function() 
    {
        if (this.DEBUG) { console.log("Health -1 Clicked."); }
        if (this.healthVal > this.healthFloor)
        {
            this.healthVal--;
            this.healthText.textContent = this.healthVal;
        }
    }

    StatsManager.prototype.SpecialUp = function()
    {
        if (this.DEBUG) { console.log("Special Up Clicked.") }
    }

    StatsManager.prototype.SpecialDown = function()
    {
        if (this.DEBUG) { console.log("Special Down Clicked.") }
    }

    StatsManager.prototype.IncreaseAttackCap = function(val)
    {
        if (this.DEBUG) { console.log("Increasing Attack Cap") }
        var amt = val || 1;
        this.attackCap += amt;
    }

    StatsManager.prototype.IncreaseDefenseCap = function(val)
    {
        if (this.DEBUG) { console.log("Increasing Defense Cap") }
        var amt = val || 1;
        this.defenseCap += amt;
    }

    StatsManager.prototype.IncreaseHealthCap = function(val)
    {
        if (this.DEBUG) { console.log("Increasing Health Cap") }
        var amt = val || 1;
        this.healthCap += amt;
    }

    return StatsManager();

})();

 this.specialDown.addEventListener('click', this.SpecialDown);

this.defensePlus.addEventListener('click', this.DefensePlus.bind(this));

问题是，当我试图通过单击SVG按钮来测试事件处理程序时，什么都没有发生。没有控制台消息，什么都没有。但是，文本框的所有值都更改为5（不同于HTML标记的默认值10）。因此，这意味着我的模块必须访问DOM才能更改这些值，但由于某种原因没有附加事件处理程序。我和我的教授都不知道为什么，任何帮助都将不胜感激。

根据您分配给

StatsManager.prototype.*

我猜您实际上想返回

StatsManager的实例

return new StatsManager();

否则，代码中的

此

将是全局范围（

窗口

）

我认为，您的click回调函数中的

this

也是错误的

现在的代码是这样的，当您看到这样的行时：

<!-- Health Stuff -->
<g id="Health_Plus">
    <rect x='72' y='184' width='20' height='20' fill-opacity='0' /> 
    <line fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" x1="82.223" y1="186.167" x2="82.223" y2="202.167"/>
    <line fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" x1="89.723" y1="194.167" x2="74.723" y2="194.167"/>
</g>
<g id="Health_Minus">
    <rect x='74.723' y='210' width='15' height='10' fill-opacity='0'/>
    <line fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" x1="89.723" y1="213.833" x2="74.723" y2="213.833"/>
</g>
<g id="Health_Icon">
    <line fill="none" stroke="#EC1C24" stroke-width="11" stroke-miterlimit="10" x1="61.504" y1="128.726" x2="61.504" y2="177.716"/>
    <line fill="none" stroke="#EC1C24" stroke-width="11" stroke-miterlimit="10" x1="37.01" y1="153.221" x2="86" y2="153.221"/>
</g>
<g>
    <text id='Health_Text' x='40' y='210' font='sans-serif' font-size='25'>10</text>
</g>

module.exports = (function ()
{
    // function StatsManager = {};

    function StatsManager ()
    {
        //////////////////////////////////////
        // Value for outputting debug code. //
        //////////////////////////////////////
        this.DEBUG = true;

        //////////////////////////////////////
        // Default values for start of game //
        //////////////////////////////////////
        this.startingAttackVal = 5;
        this.startingDefenseVal = 5;
        this.startingHealthVal = 5;

        this.attackCap = 10;
        this.defenseCap = 10;
        this.healthCap = 10;

        this.attackFloor = 1;
        this.defenseFloor = 1;
        this.healthFloor = 1;

        ///////////////////
        // Actual values //
        ///////////////////
        this.attackVal = this.startingAttackVal;
        this.defenseVal = this.startingDefenseVal;
        this.healthVal = this.startingHealthVal;

        //////////////////////////////////////////////////////
        // Hooks to all the UI buttons in the stats manager //
        //////////////////////////////////////////////////////
        this.attackPlus = document.getElementById('Attack_Plus');
        this.attackPlus.addEventListener('click', self.AttackPlus);

        this.attackMinus = document.getElementById('Attack_Minus');
        this.attackMinus.addEventListener('click', this.AttackMinus);

        this.defensePlus = document.getElementById('Defense_Plus');
        this.defensePlus.addEventListener('click', this.DefensePlus);

        this.defenseMinus = document.getElementById('Defense_Minus');
        this.defenseMinus.addEventListener('click', this.DefenseMinus);

        this.healthPlus = document.getElementById('Health_Plus');
        this.healthPlus.addEventListener('click', this.HealthPlus);

        this.healthMinus = document.getElementById('Health_Minus');
        this.healthMinus.addEventListener('click', this.HealthMinus);

        this.specialUp = document.getElementById('Special_Up');
        this.specialUp.addEventListener('click', this.SpecialUp);

        this.specialDown = document.getElementById('Special_Down');
        this.specialDown.addEventListener('click', this.SpecialDown);

        //////////////////////////////
        // Assignment of the values //
        //////////////////////////////
        this.attackText = document.getElementById('Attack_Text');
        this.attackText.textContent = this.attackVal;

        this.defenseText = document.getElementById('Defense_Text');
        this.defenseText.textContent = this.defenseVal;

        this.healthText = document.getElementById('Health_Text');
        this.healthText.textContent = this.healthVal;
    }

    StatsManager.prototype.AttackPlus = function() 
    {
        if (this.DEBUG) { console.log("Attack +1 Clicked"); }
        if (this.attackVal < this.attackCap)
        {
            this.attackVal++;
            this.attackText.textContent = this.attackVal;
        }
    }

    StatsManager.prototype.AttackMinus = function() 
    {
        if (this.DEBUG) { console.log("Attack -1 Clicked"); }
        if (this.attackVal > this.attackFloor)
        {
            this.attackVal--;
            this.attackText.textContent = this.attackVal;
        }
    }

    StatsManager.prototype.DefensePlus = function() 
    {
        if (this.DEBUG) { console.log("Defense +1 Clicked") }
        if (this.defenseVal < this.defenseCap)
        {
            this.defenseVal++;
            this.defenseText.textContent = this.defenseVal;
        }
    }

    StatsManager.prototype.DefenseMinus = function() 
    {
        if (this.DEBUG) { console.log("Defense -1 Clicked") }
        if (this.defenseVal > this.defenseFloor)
        {
            this.defenseVal--;
            this.defenseText.textContent = this.defenseVal;
        }
    }

    StatsManager.prototype.HealthPlus = function() 
    {
        if (this.DEBUG) { console.log("Health +1 Clicked"); }
        if (this.healthVal < this.healthCap)
        {
            this.healthVal++;
            this.healthText.textContent = this.healthVal;
        }
    }


    StatsManager.prototype.HealthMinus = function() 
    {
        if (this.DEBUG) { console.log("Health -1 Clicked."); }
        if (this.healthVal > this.healthFloor)
        {
            this.healthVal--;
            this.healthText.textContent = this.healthVal;
        }
    }

    StatsManager.prototype.SpecialUp = function()
    {
        if (this.DEBUG) { console.log("Special Up Clicked.") }
    }

    StatsManager.prototype.SpecialDown = function()
    {
        if (this.DEBUG) { console.log("Special Down Clicked.") }
    }

    StatsManager.prototype.IncreaseAttackCap = function(val)
    {
        if (this.DEBUG) { console.log("Increasing Attack Cap") }
        var amt = val || 1;
        this.attackCap += amt;
    }

    StatsManager.prototype.IncreaseDefenseCap = function(val)
    {
        if (this.DEBUG) { console.log("Increasing Defense Cap") }
        var amt = val || 1;
        this.defenseCap += amt;
    }

    StatsManager.prototype.IncreaseHealthCap = function(val)
    {
        if (this.DEBUG) { console.log("Increasing Health Cap") }
        var amt = val || 1;
        this.healthCap += amt;
    }

    return StatsManager();

})();

 this.specialDown.addEventListener('click', this.SpecialDown);

this.defensePlus.addEventListener('click', this.DefensePlus.bind(this));

此

是

窗口

，没有

特殊下降

功能。使用

new StatsManager（）

将导致运行相同的函数，但将

设置为新创建的对象实例，该实例继承自StatsManager的原型链

第二个问题是，当addEventListener（）
执行一个回调函数时，这些函数中的this
上下文将是单击的HTML DOM元素，并且MouseEvent
参数将传递给该函数。您需要在闭包中捕获StatsManager
实例，或者调用StatsManager
实例上的函数
例如：
var self = this;
this.defensePlus.addEventListener('click', function(mouseEvent) { 
    self.DefensePlus(mouseEvent);
});

或者，根据浏览器支持需要，您可以使用[Function.prototype.bind（）][1]
如下所示：
<!-- Health Stuff -->
<g id="Health_Plus">
    <rect x='72' y='184' width='20' height='20' fill-opacity='0' /> 
    <line fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" x1="82.223" y1="186.167" x2="82.223" y2="202.167"/>
    <line fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" x1="89.723" y1="194.167" x2="74.723" y2="194.167"/>
</g>
<g id="Health_Minus">
    <rect x='74.723' y='210' width='15' height='10' fill-opacity='0'/>
    <line fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" x1="89.723" y1="213.833" x2="74.723" y2="213.833"/>
</g>
<g id="Health_Icon">
    <line fill="none" stroke="#EC1C24" stroke-width="11" stroke-miterlimit="10" x1="61.504" y1="128.726" x2="61.504" y2="177.716"/>
    <line fill="none" stroke="#EC1C24" stroke-width="11" stroke-miterlimit="10" x1="37.01" y1="153.221" x2="86" y2="153.221"/>
</g>
<g>
    <text id='Health_Text' x='40' y='210' font='sans-serif' font-size='25'>10</text>
</g>

module.exports = (function ()
{
    // function StatsManager = {};

    function StatsManager ()
    {
        //////////////////////////////////////
        // Value for outputting debug code. //
        //////////////////////////////////////
        this.DEBUG = true;

        //////////////////////////////////////
        // Default values for start of game //
        //////////////////////////////////////
        this.startingAttackVal = 5;
        this.startingDefenseVal = 5;
        this.startingHealthVal = 5;

        this.attackCap = 10;
        this.defenseCap = 10;
        this.healthCap = 10;

        this.attackFloor = 1;
        this.defenseFloor = 1;
        this.healthFloor = 1;

        ///////////////////
        // Actual values //
        ///////////////////
        this.attackVal = this.startingAttackVal;
        this.defenseVal = this.startingDefenseVal;
        this.healthVal = this.startingHealthVal;

        //////////////////////////////////////////////////////
        // Hooks to all the UI buttons in the stats manager //
        //////////////////////////////////////////////////////
        this.attackPlus = document.getElementById('Attack_Plus');
        this.attackPlus.addEventListener('click', self.AttackPlus);

        this.attackMinus = document.getElementById('Attack_Minus');
        this.attackMinus.addEventListener('click', this.AttackMinus);

        this.defensePlus = document.getElementById('Defense_Plus');
        this.defensePlus.addEventListener('click', this.DefensePlus);

        this.defenseMinus = document.getElementById('Defense_Minus');
        this.defenseMinus.addEventListener('click', this.DefenseMinus);

        this.healthPlus = document.getElementById('Health_Plus');
        this.healthPlus.addEventListener('click', this.HealthPlus);

        this.healthMinus = document.getElementById('Health_Minus');
        this.healthMinus.addEventListener('click', this.HealthMinus);

        this.specialUp = document.getElementById('Special_Up');
        this.specialUp.addEventListener('click', this.SpecialUp);

        this.specialDown = document.getElementById('Special_Down');
        this.specialDown.addEventListener('click', this.SpecialDown);

        //////////////////////////////
        // Assignment of the values //
        //////////////////////////////
        this.attackText = document.getElementById('Attack_Text');
        this.attackText.textContent = this.attackVal;

        this.defenseText = document.getElementById('Defense_Text');
        this.defenseText.textContent = this.defenseVal;

        this.healthText = document.getElementById('Health_Text');
        this.healthText.textContent = this.healthVal;
    }

    StatsManager.prototype.AttackPlus = function() 
    {
        if (this.DEBUG) { console.log("Attack +1 Clicked"); }
        if (this.attackVal < this.attackCap)
        {
            this.attackVal++;
            this.attackText.textContent = this.attackVal;
        }
    }

    StatsManager.prototype.AttackMinus = function() 
    {
        if (this.DEBUG) { console.log("Attack -1 Clicked"); }
        if (this.attackVal > this.attackFloor)
        {
            this.attackVal--;
            this.attackText.textContent = this.attackVal;
        }
    }

    StatsManager.prototype.DefensePlus = function() 
    {
        if (this.DEBUG) { console.log("Defense +1 Clicked") }
        if (this.defenseVal < this.defenseCap)
        {
            this.defenseVal++;
            this.defenseText.textContent = this.defenseVal;
        }
    }

    StatsManager.prototype.DefenseMinus = function() 
    {
        if (this.DEBUG) { console.log("Defense -1 Clicked") }
        if (this.defenseVal > this.defenseFloor)
        {
            this.defenseVal--;
            this.defenseText.textContent = this.defenseVal;
        }
    }

    StatsManager.prototype.HealthPlus = function() 
    {
        if (this.DEBUG) { console.log("Health +1 Clicked"); }
        if (this.healthVal < this.healthCap)
        {
            this.healthVal++;
            this.healthText.textContent = this.healthVal;
        }
    }


    StatsManager.prototype.HealthMinus = function() 
    {
        if (this.DEBUG) { console.log("Health -1 Clicked."); }
        if (this.healthVal > this.healthFloor)
        {
            this.healthVal--;
            this.healthText.textContent = this.healthVal;
        }
    }

    StatsManager.prototype.SpecialUp = function()
    {
        if (this.DEBUG) { console.log("Special Up Clicked.") }
    }

    StatsManager.prototype.SpecialDown = function()
    {
        if (this.DEBUG) { console.log("Special Down Clicked.") }
    }

    StatsManager.prototype.IncreaseAttackCap = function(val)
    {
        if (this.DEBUG) { console.log("Increasing Attack Cap") }
        var amt = val || 1;
        this.attackCap += amt;
    }

    StatsManager.prototype.IncreaseDefenseCap = function(val)
    {
        if (this.DEBUG) { console.log("Increasing Defense Cap") }
        var amt = val || 1;
        this.defenseCap += amt;
    }

    StatsManager.prototype.IncreaseHealthCap = function(val)
    {
        if (this.DEBUG) { console.log("Increasing Health Cap") }
        var amt = val || 1;
        this.healthCap += amt;
    }

    return StatsManager();

})();

 this.specialDown.addEventListener('click', this.SpecialDown);

this.defensePlus.addEventListener('click', this.DefensePlus.bind(this));


与许多其他语言不同，此
不是拥有该函数的对象，此
是调用该函数的上下文。
基于您对StatsManager.prototype.*
的赋值。*

我猜您实际上想要返回

StatsManager

return new StatsManager();