6

問題は、ラジオボタンの上にキーを押すと、要素MyFuncが2回発生することです.1回はonkeypressイベント用、もう1回は「クリック」イベント用です。

質問「なぜ？」これを 2 つの異なる方法で処理する必要がありますが、最初のイベントが何であったかを認識できません。マウスをクリックすると、「クリック」イベントだけが発生します。

<ul>
    <li>
        <input type="radio" onkeypress="MyFunc(event, this)" onclick="MyFunc(event, this)" name="myList" id="MyId_1" />Topic 1
        <input type="radio" onkeypress="MyFunc(event, this)" onclick="MyFunc(event, this)" name="myList" id="MyId_2" />Topic 2
    </li>
</ul>

function MyFunc(e, obj) {
    alert(e.type); // alerts "keypress" and then "click"
    // Do my stuff
}
4

7 に答える 7

1

常にかさばって遅いフレームワークに頼ることなく、それを行うことができます。コツは、どのイベントがどの時点で発生したかを記録し、その上に時間枠内で作業することです。keypressイベントをトリガーすると、clickイベントは直後にトリガーされます。イベントがイベントclick後にトリガーされる速さのリストは次のとおりkeypressです...

クロム 39.0 : 0ms

Firefox 31.0 ESR : 18~20ms

IE 11 : 2~4ms

オペラ 12.1 : 0 ミリ秒

Chrome と (本物の) Opera は待ちません。IE はそこそこ速く、Firefox はいわば時間がかかります。（少なくとも私のシステムでは）動作する範囲は0〜20ミリ秒です。バックグラウンドで 150 の役に立たないプロセスでビジー状態になっているジャンク コンピューターをまだ使用しているユーザーのために、プログラムで制限を 50 ミリ秒に設定します。

グローバルレベルのイベントを利用する必要があることに注意してください。windowこれは、私が言及したすべてのブラウザーで確実に機能するようです。

var option = new function() {this.name = '';}


window.onclick = function(event)
{
 option.clickDate = new Date().getTime();
}


window.onkeypress = function(event)
{
 option.keyCode = event.keyCode;
 option.keyCodeDate = new Date().getTime();
}


function MyFunc(e,obj)
{
 if (option.keyCodeDate && option.clickDate && 
 (
  (option.clickDate - option.keyCodeDate)>=0 && 
  (option.clickDate - option.keyCodeDate)<51)
 {alert('keypress event');}
 else {alert('click event');}
}
于 2015-01-19T15:47:32.920 に答える
1

onclickラジオボタンが選択されると、イベントが発生します。キーを押して選択するため、両方のイベントが発生します。最初にonkeypressイベント、次にonclickイベント。

于 2010-03-02T13:40:20.843 に答える
0

関数に3番目のパラメーターを追加できます

function MyFunc(e, obj, click) {
    if (click) { } // do stuff
    else { } // do other stuff
}

イベントに bool を追加します...

<input type="radio" onkeypress="MyFunc(event, this, false)" onclick="MyFunc(event, this, true)" name="myList" id="MyId_1" />Topic 1
<input type="radio" onkeypress="MyFunc(event, this, false)" onclick="MyFunc(event, this, true)" name="myList" id="MyId_2" />Topic 2
于 2010-03-02T13:38:27.117 に答える
0

2 つの別個のハンドラーを作成します。1 つはクリック イベント用で、もう 1 つはキープレス用です。

その後、ハンドラーは必要なものをイベントから抽出し、共通のロジックを持つ 3 番目の関数を呼び出すことができます。

onkeypress は、スペースのイベントを無視してキーを入力する必要があります。ただし、キープレスイベントを聞いている理由がわかりません。詳しく教えていただけますか？何をするかを説明していただければ、もっと役立つかもしれません。

于 2010-03-10T17:46:42.843 に答える
-1

JavaScript内でonclickの代わりにonMouseDownを使用し、一貫性を保つために、ここにもonKeyPressイベントを追加します-HTMLタグからイベントを削除します。

sudoコード：

var myRadioButton = document.getElementById('radio');

myRadioButton.addListener("radioClick",onMouseDown);
myRadioButton.addListener("radioKey",onKeyPress);

radioClick()
{
 //code to do stuff
}

実際のコードとJavaScriptを簡単に作成する方法については、jQuery：http: //jquery.com/を確認してください。

于 2010-03-02T13:47:45.090 に答える