2

このソリューションを使用して中央のマウスクリックで div を非表示にしていましたが、jQuery を使用できないプレーンなデバッグ スクリプト内に含める必要があります (決して使用しません)。

そのイベントを記述してプレーンな JavaScript でバインドするにはどうすればよいですか?

私はグーグルとSOを検索していましたが、すべてのjQueryがベースである、私が取得した作業スクリプトのみでした。

最終的なコード:

<script type="text/javascript">
    function hideOnMiddle(event) {
        if ('which' in event) {
            if( event.which == 2 ) {
                document.getElementById('test').style.display = 'none'; 
            }
        }
    }
</script>
<div id="test" onmousedown="hideOnMiddle(event);">Hide me with middle mouse button</div>
4

2 に答える 2

2

これを見てください: http://help.dottoro.com/ljwcseaq.php (サンプル HTML コード 3) (jsFiddle)

<head>
    <script type="text/javascript">
        function WhichButton (event) {
                // all browsers except IE before version 9
            if ('which' in event) {
                switch (event.which) {
                case 1:
                    alert ("Left button is pressed");
                    break;
                case 2:
                    alert ("Middle button is pressed");
                    break;
                case 3:
                    alert ("Right button is pressed");
                    break;
                }
            }
            else {
                    // Internet Explorer before version 9
                if ('button' in event) {
                    var buttons = "";
                    if (event.button & 1) {
                        buttons += "left";
                    }
                    if (event.button & 2) {
                        if (buttons == "") {
                            buttons += "right";
                        }
                        else {
                            buttons += " + right";
                        }
                    }
                    if (event.button & 4) {
                        if (buttons == "") {
                            buttons += "middle";
                        }
                        else {
                            buttons += " + middle";
                        }
                    }
                    alert ("The following buttons are pressed: " + buttons);
                }
            }
        }
    </script>
</head>
<body>
    <div onmousedown="WhichButton (event);">Press a mouse button over this text!</div>
</body>
于 2013-01-21T09:37:15.283 に答える
0

このような場合に最初に行う必要があるのは、それがどのマウスクリックであるかを確認することです。そのために、私はあなたが使用できるjavaスクリプトを使用したコードの作業部分を持っています。ここにあるのは、リンクを使用してマウスイベントをテストし、次にテキストボックスと送信イベントをテストしたことです。あなたはあなた自身の利益のために以下を使うことができます：

    <SCRIPT type="text/javascript">
    function captureButton(event)
    {
        var button;
        if (event.which == null)
           button= (event.button < 2) ? "MOUSE BUTTON : LEFT" :
                     ((event.button == 4) ? "MOUSE BUTTON : MIDDLE" : "MOUSE BUTTON : RIGHT");
        else
           button= (event.which < 2) ? "MOUSE BUTTON : LEFT" :
                     ((event.which == 2) ? "MOUSE BUTTON : MIDDLE" : "MOUSE BUTTON : RIGHT");
        alert(button);
        preventOperation(event);
    }
    function preventOperation(event)
    {
        if (event.preventDefault)
            event.preventDefault();
        else
            event.returnValue= false;
         return false;
    }
    </SCRIPT>

    <div><B>Link Testing : </B>
    <A onmouseup="return preventOperation(event)" oncontextmenu="return preventOperation(event)" onmousedown="return captureButton(event)" ondblclick="return preventOperation(event)" onclick="return preventOperation(event)" href="javascript:void(null)">Click here with various mouse buttons to test</A> </div><BR>
    <div>
    <B>Submit Event : </B>
    <INPUT onmouseup="return preventOperation(event)" oncontextmenu="return preventOperation(event)" onmousedown="return captureButton(event)" ondblclick="return preventOperation(event)" onclick="return preventOperation(event)" type=submit value="Submit Query" name=btnG> </div><BR>
    <div>
    <B>Text Box : </B>
    <INPUT onmouseup="return preventOperation(event)" oncontextmenu="return preventOperation(event)" onmousedown="return captureButton(event)" ondblclick="return preventOperation(event)" onclick="return preventOperation(event)" name=btnG>
     </div>

これがあなたの特定の問題に役立つことを願っています。

于 2013-01-21T09:35:44.160 に答える