2011-01-18 21 views
1

Webアプリケーションには、ユーザーがボタンをクリックしたときと同じ操作をする、またはアクセスキーでボタンを押すときのショートカットが必要です。ページを再ロードせずにjavascriptでショートカットボタンをクリックする方法

私はあなたに私の問題を示すために、自分のコードを簡素化:

<html> 
<head><script src="jquery-1.4.2.js" type="text/javascript"></script></head> 
<form> 
    <body> 
     <div id="myDiv">text</div> 
     <input name="cmdChangeText" type="submit" value="change text" onclick="document.getElementById('myDiv').innerText='text is changed'; return false;" /> 

     <input name="cmdTestButton" type="submit" value="hello" onclick="alert('hello'); return false;" accesskey='z' /> 
    </body> 
</form> 
<script type="text/javascript"> 
    document.onkeydown = function() { 
     if (event.keyCode == 83) { //83 = 's' 
      window.$('[accesskey=z]').click(); 
     } 
    } 
</script> 
</html> 

最初のボタンは、テキストを変更します。 2番目のボタンをクリックするか、またはアクセスキー(IEのAlt + Z)をクリックすると、警告が表示されますが、ページはリロードされません。

この例では、Sのボタンを押すと警告が表示されますが、ページがリロードされます。 return false;がこのように無視されるのはなぜですか、私はそれについて何ができますか?

+0

IE8とChromeを使用して問題を再現できませんでした。どのブラウザを使用していますか? –

+0

本当ですか?最初にテキストを変更し、 's'を押すと、テキストは再び変更されません。 IE8でコードをテストしました。 jqueryファイルを忘れないでください! –

+0

これも再現できません。返品虚偽はその仕事をしているようだ。 – Michal

答えて

3

私はonclick="alert('hello'); return false"のものを取り除き、jQueryを使ってイベントを添付します。その後

、イベントバブリングをキャンセルしようとすることができます

$('#myInput2').click(
    function() { 
     alert('hello') 
     return false 
    } 
) 

だけ予感が。

+0

ありがとうございます。あなたのソリューションと両方のベーキングソリューションは機能します。私はASP.NETと 'OnClientClick'のボタンがあるので、私はあなたがここに表示するようなjqueryイベントにそのコードを変更する必要があります。私のためのボタンのクリックでは、もう "偽を返す"ことはありません..ありがとう! –

0

ボタンに異なる名前を付けます。この例では、「test1」と「test2」を使用して次のコードを追加しました。

$('input[name=test1]').click(function(e){ 
    e.preventDefault(); 
    $('#myDiv').innerText('text is changed'); 
}); 

$('input[name=test2]').click(function(e){ 
    e.preventDefault(); 
    alert('hello'); 
}); 

「submit」タイプの入力は、デフォルトでページを送信します。イベントで 'preventDefault()'メソッドを使用すると、意外にもデフォルトアクションが妨げられます。 をご希望の場合は、ページを読み込み直すだけでこの行が削除されます。

関連する問題