Show a content in either a dialog box or a new tab depending on the user's mouse action

Question

I have a link in my webpage that opens up a dialog that contains some information. Besides showing the information in the dialog. I also need that if the user wants to open this in a new tab instead, he may simply,

1. right-click (on the same link) , then
2. select Open link in new Tab .

Thus the same link open up a dialog if there is an click event but opens up a new tab loaded with information if user right-clicked & selected to open in new tab.

How can I implement this ?

Answer 1

This may help you out:

function clicked(e){
    if(e.button==0){
         /* left-clicked */
    }else if(e.button==2){
         /* right-clicked */
    }
}

<span onmousedown="clicked(event)">Button or Link</span>

Answer 2

If you want to use a jQuery approach, which I would recommend for normalized mouse input in various browsers, you can use this code:

<script type="text/javascript">
$(document).ready(function() {
    $('#link').mousedown(function(evt) {
            if( evt.which == 1 )
            {
                // left click
            }
            else if( evt.which == 3 )
            {
                // right click
            }
            else
            {
                // middle button click 
            }
    });
});
</script>

<a id="link" href="#">My Link</a>