我正在开发一个移动投标系统的项目。我正在设计它的前端并且遇到了我正在使用的两个按钮的问题。有两个按钮： 1) 加价；2) 投标。现在这里说的是我的代码
<input class="btnraise" type="image" src="bidraise.png" onclick="raiseBid();"/>
<input class="btnbid" type="image" src="mobilebid.png" onclick="Bid();"/
这很好用。除了首席执行官希望按钮能够相互缠绕。加注按钮是一个底部凹入的三角形，其中一个圆形的出价按钮几乎贴合到三角形的凹入底部。（不确定这是否有意义）几乎就像一个倒置在发球台上的高尔夫球。这是我用来让它们几乎接触的 CSS：
.btnbid{
width:250px;
position:relative;
top:-79px;
}
.btnraise{
width:230px;
}
无论如何，当它们被按下时，我需要让这些按钮发生变化（就像它们缩进一样）。所以我这样做了：
<input class="btnraise" type="image" src="bidraise-up.png" onmousedown="this.src='bidraise-down.png'" onmouseup="this.src='bidraise-up.png'" onclick="raiseBid();"/>
<input class="btnbid" type="image" src="mobilebid-up.png" onmousedown="this.src='mobilebid-down.png'" onmouseup="this.src='mobilebid-up.png'" onclick="Bid();"/>
这在 PC 上工作得很好......但它在移动设备上效果不佳。我可以使用的设备是第 3 代或第 4 代 iPod Touch。它不会因为没有鼠标而改变……我没想到是这样的吧？
所以我搜索了一下，发现了一些可能有用的东西。诸如将输入类型从更改为image，button但随后它们排列不正确。我丢失了位于三角形凹入部分内的圆形投标图像。所以我在想，如果我只是在事件中添加两个事件，onclick那么它会起作用，所以我尝试了这个：
<input class="btnbid" type="image" src="mobilebid-up.png" onclick="this.src='mobilebid-down.png'; Bid();this.src='mobilebid-up.png';"/>
这并没有改变手机的图像。有任何想法吗？我是否需要对此采取不同的方法，或者对移动网站的影响有什么不同？
回答：
这就是我所做的：1）添加了 id="btnbid" 2）添加了 ontouchstart 事件 3）添加了 ontouchend 事件
<input id="btnbid" class="btnbid" type="image" src="mobilebid-up.png" ontouchstart="touchStart()" ontouchend="touchEnd()"/>
然后我把它放在脚本标签中：
var btnbid = document.getElementById('btnbid');
btnbid.addEventListener('touchstart', toucchStart, false);
btnbid.addEventListener('touchend', touchEnd, false);
function touchStart( event ) {
document.getElementById("btnbid").src="mobilebid-down.png";
return false;
}
function touchEnd( event ) {
document.getElementById("btnbid").src="mobilebid-up.png";
return false;
}
这给了我想要的效果！！！