RE:アンカーに対してのEnterでGETリクエストが飛んでしまう(Firefox)
我らがギーク、てつのすけせんせーが困っているようだったのでレスってみる。
ちなみに未完成w
http://d.hatena.ne.jp/kidd-number5/20100201/1265024662
その前に、最初の一行は
$('.example').keypress(function(e)) {
じゃなくて、
$('.example').keypress(function(e) {
ね。丸括弧が一個多いから最初動かなくてあれ?みたいな。
最近 google chrome 使ってて、エクステンション入れてないからエラーに気がつかなくてあせった。。。
それはさておき、命題は、
- リンクを書いたとき(普通のリンク)
- このリンク上でEnterされた場合には
- そのhrefを無視して
- 別の挙動をさせたい
ということなので、それ以外のことは無視する前提。
あと、できるだけ他のブラウザもチェックしたかったので、家のWindows環境(IE7,Firefox2,Safari4,google chrome3.0,Opera10)で見てみた。古いとかいうつっこみはまあいいや。ほっといてw
マック環境まで面倒見なくても別にいいはずだからスルー(てつのすけせんせーもマック持ってるから)
というわけでコード全文
<!DOCTYPE html> <html dir="ltr" lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ function exampleDo(e){ alert('DO IN'); var code = (e.keyCode ? e.keyCode : e.which); alert('GET CODE'); if (code == 13) { alert("13 OK"); e.preventDefault(); // 何か別の処理をして終了したい $("span#res").after("何か別の"); alert("PREVENT OK"); return false; } alert('13 NG'); return false; alert('DO OUT'); // not call } $(".example").keypress(function(e) { alert('KEYPRESS IN'); exampleDo(e); alert('KEYPRESS OUT'); return false; }); $(".example").click(function(e) { alert('CLICK IN'); var code = (e.keyCode ? e.keyCode : e.which); if (code == 13) { exampleDo(e); } alert('CLICK OUT'); return false; }); }); </script> </head> <body> <p><a href="http://yahoo.co.jp/" class="example">yahoo</a></p> <p>このリンクがYahoo!Japanに遷移しなければおっけー</p> <span id="res">ここに動作確認</span> </body> </html>
HTML5っぽいのはご愛嬌(DOCTYPEだけじゃんw)
google からjqueryひっぱってるのはコピペしやすいように。
keyCode と which を用意してるのは昔のなごり。
あとは各ブラウザで、クリックした時とタブで選択しておいてリターンキーを押すの、両方をテストしてもらえれば。
今のところ、
IE7は問題ないように見える。
Firefox2では、キープレスイベントの直後にタブで移動しようとすると、そのキープレスも再度拾うというおまけ付き。13を見てるから問題ない(13 NGがアラートされる)けど。Firefox3でどうなるかは誰か試して。
Safari4 は、.click を書くとリターンのキープレスを取らない?chromeがいやんな挙動するんで、避けてるんだけど、大人しくUAをチェックしたほうが早いかも。
chromeは最新版にしてないのでアレなんだけど、3だとクリックイベントでキープレスイベントも拾ってるみたいで困り物。しかも、クリックイベント発生直後にキープレスを発生させて、キープレスが終わってからクリックに返ってくるという、ASのイベントフローみたいな動きをしてくれる。これ仕様的にはどうなの?<未チェック
そのためにクリックイベント中でリターンキーの押下をチェックしてる。それがSafariに悪影響(以下ループw)
Opera10 は、タブでアンカーが選択できなくて(なんで?)テスト諦めたw
という感じ。
マウスによるクリックでは問題でない、IE7,Firefox,chromeではとりあえずやりたいことができる。程度には確認できてる、と。
Safariとchromeのどっちを救うか、でやり方はちょっと変わる、のかな?
命題をもうちょっときちんとしてもらった上でプラグイン書いたほうがすっきりするかも。