Middle mousclick with javascript ( no jQuery )

Question

I was using this solution to hide divs on middle mousclick, but now I need to include it inside a plain debug script where no jQuery is available ( and never will ).

How can I write that event and bind with plain javascript?

I was searching google and SO, but only working scripts I got, where all jQuery based.

Final code:

<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>

score 2 · Accepted Answer · answered Jan 21 '13 at 09:37

Take a look at this: http://help.dottoro.com/ljwcseaq.php (Example HTML code 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>

How is that better than what i had given ? Looks same to me . — The Dark Knight, Jan 21 '13 at 09:44
Thank you both. I edited my answer with the code I ended up using. — Peon, Jan 21 '13 at 09:48

score 0 · Answer 2 · answered Jan 21 '13 at 09:35

The first thing that needs to be done in such a case is to find out which mouse click it is . For that i have a working piece of code using java script which you can use . What i have here is that , i have tested the mouse event with link, then a text box and a submit event. You can use the following to your own benefits :

    <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>

I hope this one helps you with your specific problem .

Yeah you are kinda right, but it was the only solution that i had readily available at hand and i just copied that from my local and gave it to the OP . :) — The Dark Knight, Jan 21 '13 at 09:42

Middle mousclick with javascript ( no jQuery )

2 Answers2