スマホ(アンドロイド)の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を表示して選択をさせるという処理を実装したいと考えております。

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/12/11 17:37:14
  • 終了:2013/12/13 13:24:46

ベストアンサー

id:gizmo5 No.1

gizmo5回答回数484ベストアンサー獲得回数1382013/12/13 02:20:53

ポイント100pt

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

<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

id:kameoyaji_2

ありがとうございます。
うまく動作させるしくいができそうです。

2013/12/13 13:24:02

その他の回答(0件)

id:gizmo5 No.1

gizmo5回答回数484ベストアンサー獲得回数1382013/12/13 02:20:53ここでベストアンサー

ポイント100pt

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

<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

id:kameoyaji_2

ありがとうございます。
うまく動作させるしくいができそうです。

2013/12/13 13:24:02
id:kameoyaji_2

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

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません