Question

我正在开发一个移动投标系统项目。我正在设计它的前端，并遇到了我正在使用的两个按钮的问题。有两个按钮：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上工作得很好.....但它在移动设备上效果不佳。我可以访问的设备是第三代或第四代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;  
}

这给了我预期的效果!!!

Answer 1

您应该尝试onTouch()而不是onclick

如何更改图像以显示正在按下？

1 个答案: