重量（机智）。对 Javascript 实现不工作一无所知

Posted 2023-02-22

【中文标题】重量（机智）。对 Javascript 实现不工作一无所知

【英文标题】：Wt (Witty). Clueless about Javascript implentation not working

【发布时间】：2016-01-10 07:54:03

【问题描述】：

我遇到了这个问题，我试图通过 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);

【参考方案1】：

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

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

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

【讨论】：

改了，但没用。

mouseenter 事件是特定于 IE 的，只有最新版本的其他浏览器支持它。请参阅我的答案中的链接。由于 Wt 与 jQuery 一起提供，您可以使用 jQuery .mouseenter() 事件来模拟原始事件。如果你不想使用 jQuery，你可以回退到所有浏览器都支持的原生 mouseover 事件。

两个都试过了，没有任何反应。没有错误，什么都没有。不知道如果我第一次正确使用 jQuery，只需将 button.menu()->doJavaScript() 中的 Javascript 替换为 "$(document).ready(function()$('menu').mouseenter(function()document.getElementById('time').innerHTML = Date(););$('menu').mouseleave(function()document.getElementById('time').innerHTML = Date();););"