Vaadin 和独立的 JavaScript Events

Vaadin and independent JavaScript Events

本文关键字：JavaScript Events 独立 Vaadin      更新时间：2023-09-26

我使用ProgressBar和PasswordField开发强度密码指示器。问题是我不能使用 jQuery 事件处理程序，例如 onkeydown或原生 JavaScript 的addEventListener因为它只工作一次，然后 Vaadin 以某种方式覆盖它。我不想永久完全删除它，它应该仅适用于 jQuery 对象。欢迎任何想法或更好的解决方案。

欢迎任何想法或更好的解决方案。

这就是蝙蝠侠的做法(先编码，后解释(：

@SuppressWarnings("serial")
@Theme("so5")
@JavaScript("batman.js")
public class So5UI extends UI {
    @WebServlet(value = "/*", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = false, ui = So5UI.class)
    public static class Servlet extends VaadinServlet {
    }
    @Override
    protected void init(VaadinRequest request) {
        VerticalLayout layout = new VerticalLayout();
        TextField field = new TextField();
        field.setId("batmanField");
        layout.addComponent(field);
        setContent(layout);
    }
}

而蝙蝠侠.js与So5UI类位于同一包中。

alert('Script loaded');
var i = setInterval(batmanFunction, 300);
function batmanFunction()
{
    var element = document.getElementById("batmanField");
    if(element != null)
    {
        element.addEventListener("mouseover", batmanScript);
        clearInterval(i);
    }
}
function batmanScript()
{
    alert('I am batman');
}

此代码有效，每次您将鼠标悬停在文本字段上时，都会出现带有"我是蝙蝠侠"文本的警报。我想指出一些最重要的事情：

  1. 我在字段中添加了一个Id，以便我们可以通过getElementById()找到它
  2. 我运行batmanFunction，每隔一段时间向该字段注册一个侦听器。这是因为我们无法控制 JavaScript 和 DOM 创建的执行时间。我们需要在创建 DOM 后注册侦听器。
  3. 在使用 JavaScript 和 Vaadin 时，请务必在浏览器中禁用 js 缓存，因为有时会导致混淆("此脚本应该可以工作"，而浏览器仍然使用缓存脚本(。这是在火狐上操作的方法。

该代码已在Firefox 34，Vaadin 7.3，Tomcat 7.0上进行了测试。如果您仍然遇到问题，请提供更多详细信息。

编辑：经过测试，也适用于键控

编辑2我相信我想通了为什么它可能只对你"一次"有效。由于 Vaadin 通过 Ajax 自动删除并添加div，因此每次将事件侦听器添加到 DOM 时都必须将事件侦听器添加到组件中。例如：如果您单击从布局中删除字段的按钮，稍后您将单击将相同字段添加到布局的按钮，则事件将不再生成。您必须找到这些位置并再次执行给定的脚本。您可以使用以下代码进行检查：

    @Override
    protected void init(VaadinRequest request) {
    VerticalLayout layout = new VerticalLayout();
    TextField field = new TextField();
    field.setId("batmanField");
    layout.addComponent(field);
    Button button = new Button("remove");
    button.addClickListener(new ClickListener()
    {
        @Override
        public void buttonClick(ClickEvent event)
        {
            layout.removeComponent(field);
        }
    });
    layout.addComponent(button);
    Button button2 = new Button("add");
    button2.addClickListener(new ClickListener()
    {
        @Override
        public void buttonClick(ClickEvent event)
        {
            layout.addComponent(field);
            com.vaadin.ui.JavaScript.eval("setInterval(batmanFunction, 300)");
        }
    });
    layout.addComponent(button2);
    setContent(layout);
}
相关文章：