event-handling - 通过 MouseOut/MouseOver 客户端处理程序隐藏/显示 UI 元素

Question

目标是通过 MouseOut/MouseOver 事件相互替换两个元素。具体来说，元素是标签和列表框。有一些 UI 安排，其中实现在 Chrome 中可以接受，但在 IE(9) 中总是失败。问题发生在从列表框中进行选择期间，因为浏览器会忽略下拉区域作为列表框的一部分，它会触发 mouseOut 处理程序并隐藏列表框。

是否有任何解决方案强制浏览器考虑列表框及其下拉区域？

app.createListBox() .setId('listBox');
app.createLabel('Item1') .setId('label')
    .addMouseOverHandler(app.createClientHandler()
                         .forEventSource().setVisible(false)
                         .forTargets(app.getElementById('listBox')).setVisible(true));
app.getElementById('listBox')
    .addItem('Item1')
    .addItem('Item2')
    .setVisible(false)
    .addMouseOutHandler(app.createClientHandler()
                        .forEventSource().setVisible(false)
                        .forTargets(app.getElementById('label')).setVisible(true));

非常感谢

Answer 1

有一种可能的解决方法是使用服务器处理程序来隐藏列表框。从我的测试来看，它的行为非常相似（如果不是更好的话） - 你可以在这里测试它

function doGet() {
  var app = UiApp.createApplication().setStyleAttribute('padding','100px');
  var p = app.createVerticalPanel();
  var serverHandler = app.createServerHandler('handler').addCallbackElement(p)
  var listBox = app.createListBox() .setId('listBox').setName('listBox').addChangeHandler(serverHandler);  
  var label = app.createLabel('Item1').setId('label')
    .addMouseOverHandler(app.createClientHandler()
                         .forEventSource().setVisible(false)
                         .forTargets(listBox).setVisible(true));

  listBox.addItem('Item1').addItem('Item2').addItem('Item3').addItem('Item4')         
              .setVisible(false)

  p.add(listBox).add(label)
  app.add(p)
  return app                       
}

function handler(e){
  var app = UiApp.getActiveApplication();
  var listBox = app.getElementById('listBox')
  var label = app.getElementById('label')
  listBox.setVisible(false)
  label.setVisible(true).setText(e.parameter.listBox)
  return app
}