0

目標は、MouseOut/MouseOver イベントによって 2 つの要素を相互に置き換えることです。具体的には、要素はラベルとリストボックスです。実装が Chrome で問題なく動作する UI 配置がいくつかありますが、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));

どうもありがとう

4

1 に答える 1

0

サーバー ハンドラを使用して listBox を非表示にする回避策が考えられます。私のテストから、それは非常によく似た動作をします（良くない場合）-ここでテストできます

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
}
于 2013-04-05T19:14:16.447 に答える