web-dev-qa-db-ja.com

onclickをトリガーするマウスとキーボードを区別する

リンクがマウスクリックまたはキー押下によってアクティブ化されているかどうかを判断する方法を見つける必要があります。

<a href="" onclick="submitData(event, '2011-07-04')">Save</a>

アイデアは、マウスを使用してリンクをヒットしている場合、マウスを使用して次に何をするかを選択し続けることができるということです。ただし、ページをタブで移動し、[保存]リンクにタブで移動した場合は、次の行を開いて編集します（ページはスプレッドシートのようなもので、各行はajaxを使用して編集可能になります）。

どのマウスボタンが押されたかについてイベントパラメータを照会できると思いましたが、ボタンが押されていない場合、答えは0であり、これはマウスの左ボタンと同じです。彼らは私がイベントからkeyCodeを取得できると思っていましたが、それは未定義として戻ってくるので、マウスイベントにはその情報が含まれていないと思います。

function submitData(event, id)
{
    alert("key = "+event.keyCode + "  mouse button = "+event.button);
}

常に「キー=未定義のマウスボタン= 0」を返します

手伝ってくれますか？

javascriptonclickmouseeventkeypress
27
Craig

_event.type_で条件を作成できます

_function submitData(event, id)
{
    if(event.type == 'mousedown')
    {
        // do something
        return;
    }
    if(event.type == 'keypress')
    {
        // do something else
        return;
    }
}
_

注：両方のイベントタイプをサポートするイベントを添付する必要があります。 JQueryを使用すると、$('a.save').bind('mousedown keypress', submitData(event, this));のようになります。

インライン_onClick=""_は、そのクリックイベントを常に渡すため、トラップされます。

[〜＃〜]編集[〜＃〜]：これが動作するデモですネイティブJavaScriptで私のケースを証明するには： http://jsfiddle.net/AlienWebguy/HPEjt/

タブフォーカス中にノードが強調表示されているのが見やすいようにボタンを使用しましたが、どのノードでも同じように機能します。

12
AlienWebguy

event.screenX およびevent.screenYはゼロです。

$('a#foo').click(function(evt) {
  if (evt.screenX == 0 && evt.screenY == 0) {
    window.alert('Keyboard click.');
  } else {
    window.alert('Mouse click.');
  }
});

CodePenのデモ

すべてのブラウザとすべてのケースで機能するという保証は見つかりませんでしたが、キーボードを介して行われた「クリック」を検出しようとしないという利点があります。したがって、このソリューションは、「クリック」をより確実に検出しますが、キーボードまたはマウスからのものかどうかを検出する信頼性はやや低くなります。 reverseを好む場合は、 @ Gonzaloからの回答 のようになります。

注：この方法を使用して見つけた場所の1つは、 Chromium です。

9
Wernight

クリックとキーボードヒットを区別して、キーを押した瞬間に発生したキーダウンイベントをキャプチャして破棄できます。

jQuery(function($) {
    $("a#foo").keydown(function() {
        alert("keyboard");
        return false;
    }).click(function() {
        alert("mouse");
        return false;
    })
})

http://jsfiddle.net/NuP2g/

6
Gonzalo Larralde

Event.detailを使用できます

if(event.detail === 0) {
    // keypress
} else {
    // mouse event
}
4
Yvain

これは古い質問ですが、jqueryやIE互換のソリューションがなく、機能するものを探すのにどれだけの時間がかかったかを考えると、ここ（最初に来た場所）に置くのは悪い考えではないと思います。

私はこれをテストし、それがうまく機能していることを発見しました：

let mouseDown = false;

element.addEventListener('mousedown', () => {
  mouseDown = true;
});

element.addEventListener('mouseup', () => {
  mouseDown = false;
});

element.addEventListener('focus', (event) => {
  if (mouseDown) {
    // keyboard
  } else {
    // mouse
  }
});

ソースリンク： https://www.darrenlester.com/blog/focus-only-on-tab

0
Célia

mouseupイベントを処理します。
直後にclickを取得した場合、それはおそらくマウスで実行されました。

0
SLaks