html - 如何使图像更改以显示它正在被按下？

Question

我正在从事一个移动投标系统的元素。我正在设计它的前端，但遇到了我使用的两个按钮的问题。有两个按钮:1)提高出价； 2)出价。 现在这里说的是我的代码

<input class="btnraise" type="image" src="bidraise.png" onclick="raiseBid();"/>
<input class="btnbid" type="image" src="mobilebid.png" onclick="Bid();"/

这很好用。除了 CEO 希望按钮能够相互环绕。加注按钮是一个底部凹陷的三 Angular 形，圆圈投标按钮几乎碰到三 Angular 形的凹底。 (不确定这是否有意义)几乎就像一个倒置在球座上的高尔夫球。这是我用来使它们几乎接触的 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 之类的事情，但它们并没有正确对齐。我丢失了位于三 Angular 形凹陷部分内的圆形投标图像。所以我在想，如果我只是将这两个事件都添加到 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