DOM更新在dojotoolkit中略有延迟

时间:2013-03-05 09:58:35

标签: javascript dom dojo dojox.mobile

我有一个带有6个dojox.mobile.IconMenuItems的dojox.mobile.IconMenu。 当我按下IconMenuItems时,按钮应该被按下。我通过简单地在正确的时间切换按钮的图像来实现这种行为。

现在出现的问题是:

在桌面上(Chrome):当我点击按钮时,视图变化得太快,以至于您无法看到新的,压入的图形!我必须按住按钮约半秒钟,然后将其释放,直到按钮显示新图像。

在Android / iOS设备上(已测试:Chrome,Firefox,Opera,Skyfire,Board Browser,Dolphin,Safari):按钮会更改图像但我看不到更改,因为图形更改太慢。

这是代码(html)

<ul data-dojo-type="dojox.mobile.IconMenu" id="portalMenu" style="border: none; outline: none; background-image: url('../deliverables_800x480/backgrounds/img_bg_portal.gif'); position: absolute; z-index: 900; background-repeat: no-repeat; background-size: cover; height: 100%; width: 100%; top: 26px;">
<li label="IconMenuItem" data-dojo-type="dojox.mobile.IconMenuItem" id="portalButton1" icon="../deliverables_800x480/buttons/portal/btn_portal_freetext_big_normal.gif" style="border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; line-height: 0px; text-align: center;" moveTo="null" onmousedown="toggleImg1()" onmousdown="toggleView1()"></li>
  

  [此处的其他按钮]

以下是我调用的函数(javascript):

onmousedown事件=“toggleImg1()

// press button1
// press button1
function toggleImg1(){  
    portalButton1.set("icon", "../deliverables_800x480/buttons/portal/btn_portal_freetext_big_armed.gif");
}
function toggleView1() {   
    portalButton1.set("moveTo", "messaging");
    portalButton1.set("selected", true);
    portalButton1.set("icon", "../deliverables_800x480/buttons/portal/btn_portal_freetext_big_normal.gif");

}

1 个答案:

答案 0 :(得分:1)

首先,您的标记中是否存在错误?我看到onmousedown然后onmousdown,不应该是onmousedown / onmouseup吗?

但是我认为你应该使用dojo / touch并听取touch.press/release而不是mousedown / up。这将确保您听取触摸或鼠标,具体取决于设备。

或者,也许你可以看到项目的“选定”状态,并在选择项目时更改图标?类似的东西:

item.watch("selected", function(){
    this.set("icon", this.selected?"selected.png":"deselected.png");
});

然后,要让项目保持一段时间,您可以设置_selEndMethod =“timer”。你也可以根据需要更改_duration(默认为800,对你来说应该更短一些?)。