0

代码是示例，但结果似乎根本不合逻辑；这里的代码：

function lap_validation(event) {
    if (event.srcElement == document.getElementById("Suivant")) {
        console.log("Suivant fired " + event.srcElement);
        document.getElementById("msg").textContent = " Voulez vous vraiment passer à la lettre  suivante ?";
        console.log(document.getElementById("msg").textContent);
        var buyButton = document.getElementById("test");
        document.getElementById("confirmFlyout").winControl.show(buyButton);
        document.getElementById("no").addEventListener("click", function () {
                document.getElementById("confirmFlyout").winControl.hide();
                console.log("hide");

        }, false);
        document.getElementById("ok").addEventListener("click", function () {
            //next();
            //document.getElementById("confirmFlyout").winControl.hide();
            console.log("click on ok from flyout");
        }, false);

    }
}

当我单击“Suivant”按钮时，当我第一次单击“确定”按钮时会出现一个弹出窗口我有这个输出：

Suivant fired [object HTMLButtonElement]
Voulez vous vraiment passer à la lettre  suivante ?
click on ok from flyout

当我第二次点击时：

Suivant fired [object HTMLButtonElement]
Voulez vous vraiment passer à la lettre  suivante ?
click on ok from flyout
click on ok from flyout

第三：

Suivant fired [object HTMLButtonElement]
 Voulez vous vraiment passer à la lettre  suivante ?
click on ok from flyout
click on ok from flyout
click on ok from flyout

我不明白为什么它会重复 Flyout 按钮的指令（当我单击“否”按钮时也是如此）。

任何帮助将不胜感激

4

3 回答 3

3

您每次都在添加一个新的事件侦听器。最简单的解决方法是将...更改 document.getElementById("ok").addEventListener("click", function () {... 为 document.getElementById("ok").onclick = function() {...

addEventListener 的一大优势是它允许您添加多个事件侦听器。正如你在这里看到的那样，这可能会咬你一口。您每次都在添加一个新的事件侦听器。如果您改用 onclick，那么您每次都会替换事件侦听器，因此 click 事件只会存在一个事件侦听器。

于 2013-04-17T13:49:16.673 回答
0

由于示例对每个输出都使用了 console.log() ，因此这种情况的解决方案很清楚：每次单击时ok都会调用console.log("click on ok from flyout");，从而将另一行写入控制台。

如果您的真实代码不使用console.log，请为我们提供一个示例——您的代码会按照应有的方式运行。

于 2013-04-17T10:01:41.993 回答
0

使用 onclick 注册事件也有另一面。它可能会在更多涉及的应用程序中覆盖其他已注册的事件处理程序，然后最终追踪事件如何不进入某些流程。最好遵循_initializeEventHandlers()在 winjs 页面中使用方法的做法。从 onready 事件处理程序调用它并在此位置注册所有事件处理程序。如果在某些情况下需要（例如共享合约事件），请覆盖unload()方法以取消注册处理程序。

WinJS.UI.Pages.define('/pages/mypage/mypage.html',
{
    ready: function onready(element, options)
    {
        this.element = element;
        this.options = options;
        this._initialize();
    },
    _initialize: function initialize()
    {
        this._initializeEventHandlers();
    },
    _initializeEventHandlers: function initializeEventHandlers()
    {
        // all element with id can be access by the variable names 
        ok.addEventListener('click', this._onokclick.bind(this));
        no.addEventListener('click', this._onnoclick.bind(this));
    },
    _onxyz: function _onxyzhandler(event)
    {
        confirmFlyout.winControl.show(buyButton);
    },
    _onokclick: function onokclick(event)
    {
        console.log('ok button in flyout clicked');
    },
    _onnoclick: function onnoclick(event)
    {
        confirmFlyout.winControl.hide();
        console.log('no button in flyout clicked');
    }
});
于 2013-04-19T04:13:46.937 回答