在移动设备上快速按下时,输入图像有高亮显示框

时间:2013-04-10 19:11:49

标签: android iphone image mobile input

我正在为即将举行的活动开设移动拍卖页面。我有两个按钮。 1)提高出价的三角形图像2)提交出价的圆形图像。

三角形有一个凹底部,圆形图像位于其内部。从正常状态按下到缩进时图像会发生变化,只是为了表示正在按下它们。我正在为图片使用onmousedownonmouseup个事件。

<input id="btnraise" class="btnraise" type="image" src="bidraise-up.png" onmousedown="touchStartRaise()" onmouseup="touchEndRaise();" />
<input id="btnbid" class="btnbid" type="image" src="mobilebid-up.png" onmousedown="touchStart()" onmouseup="touchEnd()"/>

我为每个图像都有两个事件监听器,以满足不同移动平台(即Windows Phone,iPhone,Android)的要求。我这样开始是因为据我所知,iPhone使用触摸事件,这对他们来说效果最好。 (我可能会弄错。如果你对此有所了解,请告诉我)

var btnbid = document.getElementById('btnbid');
btnbid.addEventListener('touchstart', touchStart, false);
btnbid.addEventListener('touchend', touchEnd, false);

var btnraise = document.getElementById('btnraise');
btnraise.addEventListener('touchstart', touchStartRaise, false);
btnraise.addEventListener('touchend', touchEndRaise, false);

这是背景,所以你了解我拥有的东西。现在,当我在不同的平台上测试这个页面时,我得到这个框,就像按下输入图像时按钮突出显示一样。仅限移动设备。我不知道这是什么。有人可以帮忙吗?这一切都有意义吗?

0 个答案:

没有答案