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

使用服务器处理程序隐藏listBox可能有一种解决方法。从我的测试来看，它表现得非常相似（如果不是更好） - 你可以test it here

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
}

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

1 个答案: