モバイル入札システムのプロジェクトに取り組んでいます。フロント エンドを設計していて、使用している 2 つのボタンで問題が発生しました。2 つのボタンがあります。1) 入札価格を上げる。2)入札。ここで言われているのは私のコードです
<input class="btnraise" type="image" src="bidraise.png" onclick="raiseBid();"/>
<input class="btnbid" type="image" src="mobilebid.png" onclick="Bid();"/
それはうまくいきます。ただし、CEO は、ボタンを互いに巻き付けたいと考えていました。レイズ ボタンは底が凹んだ三角形で、丸い円のビッド ボタンが三角形の底にほぼ接するように収まります。(これが意味をなすかどうかはわかりません) ほとんど逆さまにティーの上に置かれているゴルフ ボールのようなものです。これは、それらをほとんど接触させるために使用している 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()"/>
次に、これを script タグに入れます。
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;
}
これにより、望ましい効果が得られました!!!