Question

我遇到了问题，我试图通过Javascript向弹出菜单添加事件监听器。但它看起来，没有附加或其他东西。因为当我在弹出菜单上移动光标时，文本小部件值不会更改。我做错了什么？

#define _SCL_SECURE_NO_WARNINGS

#include <vld.h>

#include <Wt/WApplication>
#include <Wt/WContainerWidget>
#include <Wt/WPushButton>
#include <Wt/WPopupMenu>
#include <Wt/WBreak>
#include <Wt/WJavaScript>

#include <windows.h>

class FooApplication : public Wt::WApplication {
public:
    FooApplication(Wt::WEnvironment const& env)
    : Wt::WApplication(env),
    container(new Wt::WContainerWidget(root())),
    signal(this, "signal"){

        text.setText("Press the button and You will see the current date and time.");
        text.setId("time");

        container.addWidget(&text);

        button.setId("button");
        button.setText("Date & Time!");
        button.setMenu(new Wt::WPopupMenu());
        //hider_button->menu()->setAutoHide(true, 0);
        button.menu()->setId("menu");
        button.menu()->addItem("First");
        button.menu()->addItem("Second");
        button.menu()->addItem("Third");
        button.menu()->addItem("Fourth");

        lineBreak = new Wt::WBreak(&container);

        container.addWidget(&button);

        button.clicked().connect([&](Wt::WMouseEvent const&) {
            text.doJavaScript("document.getElementById('time').innerHTML = Date()");
        });

        button.mouseWentOver().connect([&](Wt::WMouseEvent const&) {
            button.menu()->doJavaScript("document.getElementById('menu').style.overflow = 'hidden';");
            button.menu()->doJavaScript("document.getElementById('menu').style.height = '0px';");
            button.menu()->popup(&button);

            button.menu()->doJavaScript("function expand() {"
                "var target = document.getElementById('menu');"
                "var h = target.offsetHeight;"
                "var sh = target.scrollHeight;"
                "var loopTimer = setTimeout(expand, 8);"
                "if (h < sh) { h += 5; } else {"
                "clearTimeout(loopTimer); h = sh - 2;}"
                "target.style.height = h + \"px\";}"
                "expand();"
            );

            buttonMouseOn = true;
        });

        button.mouseWentOut().connect([&](Wt::WMouseEvent const&) {
            buttonMouseOn = false;
        });

        button.menu()->doJavaScript(
            "document.getElementById('menu').addEventListener('onmouseenter', function(){"
            //+ signal.createCall() +
            "document.getElementById('time').innerHTML = Date()})"
        );

        signal.connect(this, &FooApplication::changeValue);

    }

    void changeValue() {
        Beep(523, 500);
        if (menuMouseOn){
            menuMouseOn = false;
        } else {
            menuMouseOn = true;
        }
    }

    static FooApplication* create(Wt::WEnvironment const& env) {
        return new FooApplication(env);
    }

private:
    Wt::WContainerWidget container;
    Wt::WBreak* lineBreak;
    Wt::WText text;
    Wt::WPushButton button;
    Wt::JSignal<void> signal;
    bool buttonMouseOn = false;
    bool menuMouseOn = false;
};

int main(int argc, char** argv) {
    return Wt::WRun(argc, argv, &FooApplication::create);
}

Answer 1

它应该是'mouseenter'，而不是'onmouseenter'：

document.getElementById('menu').addEventListener('mouseenter', function() { ... });

https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter

Wt（Witty）。关于Javascript实现不起作用的无能为力

1 个答案: