人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

スマホ(アンドロイド)のselectのonclick(または他のイベントでも可)で、関数呼び出し(標準の動きはさせずに)を行わせるには。

下記のようなソースを作りました。

<html>
<form>
<select id="TestSelect" name="drop02" onClick="alert('テスト');">
<option value="A" selected="selected">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</select>
</form>
<br>
<div onClick="alert('テスト');">onClick&alertテスト</div>
</html>

で、selectをクリックすると、selectのポップアップが表示されてその上に、alert画面が表示されます。
これをselectのポップアップを表示させずにalert画面だけを表示させたいのですが、何か良い方法はありませんでしょうか?(最終的にはfromでpostさせたいので、<ul>
<li>で選択して、valueとlabeleの値を保持して・inputのhideに値を設定して・・という面倒なことがしたくないと考えています。)

最終的には、selectをクリックしたら、ドラムみたいな選択UIを表示して選択をさせるという処理を実装したいと考えております。

方法が、ある・ない を含めて、ご指導頂ければ幸いです。




●質問者: kameoyaji_2
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● gizmo5
●100ポイント ベストアンサー

このような感じでデフォルトの動作をキャンセルできると思います。

<html>
<form>
<select id="TestSelect" name="drop02" >
(省略)
</select>
</form>
<br>

<script>
function handler(e) {
console.log("テスト");
e.preventDefault();
}

window.onload = function() {
var e = document.getElementById("TestSelect");
e.addEventListener("mousedown", handler, false);
e.addEventListener("touchstart", handler, false);
}
</script>
</html>

touchstart は touchend でも良いかもしれません。

ドラムみたいな選択UIで option のどれかを選択するのも、<li> で選択して hidden な input に値を入れるのも大差ないと思いますがw


kameoyaji_2さんのコメント
ありがとうございます。 うまく動作させるしくいができそうです。

質問者から

何度もタッチしていると、クリックイベントが発生して、
クリックの時には、選択画面が表示されてしまいます。
補足情報ありましたらお教え頂ければと思います。


関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ