Launch onclick/onmousedown ONLY with LMB

Question

Well alright, I tried to search around the internet and didn't find how to do this. Everything I find is only to disable the context menu on right click. The point is : I am (Trying to) making a (simple) game. I have my scripts to move my player around, but the onclick/onmousedown (And all the mouse events in fact) can be triggered with both LMB and RMB. I don't really care if the right click works, the real problem is that I have an interval being set to "on" on mouse down and "off" on mouse up ; (Dragging the character) ; If I spam both LMB and RMB, at one point the interval doesn't toggle off and it drags the character around without any button pressed. Clicking again doesn't even reset the interval.

I could paste the code if needed but I'm fairly new to javascript and I guess it's messy and wrong. But hey, so far, so good.

Alright let's go for the code... If have 2 files so far one "Main" and another for character movement... No seriously this won't really help since I can't simply post the parts I need because it's all interrelated*(?);

Main code :

/* ==========
 * Main JS file. Calling functions and handling user input.
========== */

/* Everlasting Intervals */
    window.setInterval(function(){animateplayersprite()},250);
/* ========== */

/* Onload */
    window.onload = function(){
        /* initialize Mouse Interactions */
                  document.onmousemove = getmouseposition;
        /* ========== */ 

        /* Initialize Character Movement */
            Player.style.marginLeft = playerx - (window.innerWidth / 2 - 512) + "px";   
            Player.style.marginTop = playery - (window.innerHeight /2 - 384) + "px";
            Scene.onmousemove = characterorientation;
            document.onmouseup = characterdragstop;
            document.onclick = characterdragstop;
            GameAreaL2.onmousedown = characterdrag;
            Scene.onmouseout = characterdragstop;
        /* ========== */
    }
/* ========== */

/* Global Variables */
    /* Mouse Interaction */
        var target = false;
    /* ========== */

    /* Character Movement */
        var posx = window.innerWidth / 2; /* Sync Values */
        var posy = window.innerHeight / 2; /* Sync Values */
        var tempx = window.innerWidth / 2; /* Sync Values */
        var tempy = window.innerHeight / 2; /* Sync Values */
        var playerx = window.innerWidth / 2; /* Sync Values */
        var playery = window.innerHeight / 2; /* Sync Values */
        var charspeed = 1;
        var charspeedcall = false;
        var chardrag = false;
        var charisdragged = false;
        var playerismoving = false;
        var playercanlook = true;
        var playermovementa = 0;
        var playeranimationframex = 2;
        var playeranimationframey = 1;
        var characteredgescroll = false;
    /* ========== */

    /* Game Area L1 Properties */
       var GameAreaL1BackgroundPositionx = 0;
       var GameAreaL1BackgroundPositiony = 0;
       var GameAreaL1BackgroundWidth = 2000; /* TESTS ; WILL BE OVERRIDEN ON AREA LOADING */
       var GameAreaL1BackgroundHeight = 2000; /* TESTS ; WILL BE OVERRIDEN ON AREA LOADING */
    /* ========== */
/* ========== */

/* Functions */
    /* Get mouse Position in posx and posy */
        function getmouseposition(e){
            if(!e){ e=window.event; }
            posx = e.clientX;
            posy = e.clientY;
            }
    /* ========== */

    /* Define if mouse is pointing outside the game area (Override Mouse Movement) */
        function targeton(){
            target = true;
        }
        function targetoff(){
            target = false;
        }
    /* ========== */
/* ========== */

And the character movement :

/* ==========
 * JS file handling character movement.
========== */

/* Functions */
    /* Find active zone and look at the mouse */
        function characterorientation(){
            if(target == false){
                if(charisdragged == true || playercanlook == true){
                    if(posy < 0.75 * (posx + (512 - playerx)) + (playery - 384) && posy > -0.75 * (posx + (512 - playerx)) + (384 + playery)){
                        if(playeranimationframex == 1){
                            PlayerBody.style.backgroundPosition = "0px 288px";
                        }
                        else if(playeranimationframex == 2){
                            PlayerBody.style.backgroundPosition = "-72px 288px";
                        }
                        else if(playeranimationframex == 3){
                            PlayerBody.style.backgroundPosition = "-144px 288px";
                        }
                        else if(playeranimationframex == 4){
                            PlayerBody.style.backgroundPosition = "-72px 288px";    
                        }
                        playeranimationframey = 4;
                    } 
                    else if(posy > 0.75 * (posx + (512 - playerx)) + (playery - 384) && posy > -0.75 * (posx + (512 - playerx)) + (384 + playery)){
                        if(playeranimationframex == 1){
                            PlayerBody.style.backgroundPosition = "0px 192px";
                        }
                        else if(playeranimationframex == 2){
                            PlayerBody.style.backgroundPosition = "-72px 192px";
                        }
                        else if(playeranimationframex == 3){
                            PlayerBody.style.backgroundPosition = "-144px 192px";
                        }
                        else if(playeranimationframex == 4){
                            PlayerBody.style.backgroundPosition = "-72px 192px";    
                        }
                        playeranimationframey = 3;
                    } 
                    else if(posy > 0.75 * (posx + (512 - playerx)) + (playery - 384) && posy < -0.75 * (posx + (512 - playerx)) + (384 + playery)){ 
                        if(playeranimationframex == 1){
                            PlayerBody.style.backgroundPosition = "0px 96px";
                        }
                        else if(playeranimationframex == 2){
                            PlayerBody.style.backgroundPosition = "-72px 96px";
                        }
                        else if(playeranimationframex == 3){
                            PlayerBody.style.backgroundPosition = "-144px 96px";
                        }
                        else if(playeranimationframex == 4){
                            PlayerBody.style.backgroundPosition = "-72px 96px"; 
                        }
                        playeranimationframey = 2;      
                    } 
                    else if(posy < 0.75 * (posx + (512 - playerx)) + (playery - 384) && posy < -0.75 * (posx + (512 - playerx)) + (384 + playery)){
                        if(playeranimationframex == 1){
                            PlayerBody.style.backgroundPosition = "0px 0px";
                        }
                        else if(playeranimationframex == 2){
                            PlayerBody.style.backgroundPosition = "-72px 0px";
                        }
                        else if(playeranimationframex == 3){
                            PlayerBody.style.backgroundPosition = "-144px 0px";
                        }
                        else if(playeranimationframex == 4){
                            PlayerBody.style.backgroundPosition = "-72px 0px";  
                        }
                        playeranimationframey = 1;  
                    }
                }
            }
        }
    /* ========== */

    /* Animate the sprite if the player is moving */
        function animateplayersprite(){
            if(playerismoving == true){
                if(playeranimationframex == 1){
                    if(playeranimationframey == 1){
                        PlayerBody.style.backgroundPosition = "-72px 0px";
                    }
                    else if(playeranimationframey == 2){
                        PlayerBody.style.backgroundPosition = "-72px 96px"; 
                    }
                    else if(playeranimationframey == 3){
                        PlayerBody.style.backgroundPosition = "-72px 192px";
                    }
                    else if(playeranimationframey == 4){
                        PlayerBody.style.backgroundPosition = "-72px 288px";
                    }
                    playeranimationframex = 2;
                }
                else if(playeranimationframex == 2){
                    if(playeranimationframey == 1){
                        PlayerBody.style.backgroundPosition = "-144px 0px";
                    }
                    else if(playeranimationframey == 2){
                        PlayerBody.style.backgroundPosition = "-144px 96px";    
                    }
                    else if(playeranimationframey == 3){
                        PlayerBody.style.backgroundPosition = "-144px 192px";
                    }
                    else if(playeranimationframey == 4){
                        PlayerBody.style.backgroundPosition = "-144px 288px";
                    }
                    playeranimationframex = 3;
                }
                else if(playeranimationframex == 3){
                    if(playeranimationframey == 1){
                        PlayerBody.style.backgroundPosition = "-72px 0px";
                    }
                    else if(playeranimationframey == 2){
                        PlayerBody.style.backgroundPosition = "-72px 96px"; 
                    }
                    else if(playeranimationframey == 3){
                        PlayerBody.style.backgroundPosition = "-72px 192px";
                    }
                    else if(playeranimationframey == 4){
                        PlayerBody.style.backgroundPosition = "-72px 288px";
                    }
                    playeranimationframex = 4;
                }
                else if(playeranimationframex == 4){
                    if(playeranimationframey == 1){
                        PlayerBody.style.backgroundPosition = "0px 0px";
                    }
                    else if(playeranimationframey == 2){
                        PlayerBody.style.backgroundPosition = "0px 96px";   
                    }
                    else if(playeranimationframey == 3){
                        PlayerBody.style.backgroundPosition = "0px 192px";
                    }
                    else if(playeranimationframey == 4){
                        PlayerBody.style.backgroundPosition = "0px 288px";
                    }
                    playeranimationframex = 1;
                }
            }
            else{
                if(playeranimationframey == 1){
                    PlayerBody.style.backgroundPosition = "-72px 0px";
                }
                else if(playeranimationframey == 2){
                    PlayerBody.style.backgroundPosition = "-72px 96px"; 
                }
                else if(playeranimationframey == 3){
                    PlayerBody.style.backgroundPosition = "-72px 192px";
                }
                else if(playeranimationframey == 4){
                    PlayerBody.style.backgroundPosition = "-72px 288px";
                }
                    playeranimationframex = 4;
            }
        }       
    /* ========== */

    /* Player's Movement directions */
        function playerxplus(charmovexap){
            if(tempx - playerx < charspeed){
                playerx += tempx - playerx;
            }
            else{
                playerx += charmovexap * charspeed;
            }
        } 
        function playerxminus(charmovexam){
            if(playerx - tempx < charspeed){
                playerx -= playerx - tempx;
            }
            else{
                playerx -= charmovexam * charspeed;
            }
        }
        function playeryplus(charmoveyap){
            if(tempy - playery < charspeed){
                playery += tempy - playery;
            }
            else{
                playery += charmoveyap * charspeed;
            }   
        }
        function playeryminus(charmoveyam){
            if(playery - tempy < charspeed){
                playery -= playery  - tempy;
            }
            else{
                playery -= charmoveyam * charspeed;
            }
        }
    /* ========== */

    /* Set the character animation speed and move depending on direction + Scroll area if the player is near the edge */
        function charactermovementspeed(){
            if(characteredgescroll == false){
                if(tempx > playerx && tempy > playery){
                    playermovementa = (tempy - playery) / (tempx - playerx);
                    if(tempx - playerx > tempy - playery){
                        playerxplus(1);
                        playeryplus(playermovementa);
                    }
                    else if(tempx - playerx < tempy - playery){
                        playerxplus(1/playermovementa);
                        playeryplus(1);
                    }
                }
                else if(tempx < playerx && tempy < playery){
                    playermovementa = (playery - tempy) / (playerx - tempx);
                    if(playerx - tempx > playery - tempy){
                        playerxminus(1);
                        playeryminus(playermovementa);  
                    }
                    else{
                        playerxminus(1/playermovementa);
                        playeryminus(1);
                    }
                }
                else if(tempx > playerx && tempy < playery){
                    playermovementa = (playery - tempy) / (tempx - playerx);
                    if(tempx - playerx > playery - tempy){
                        playerxplus(1);
                        playeryminus(playermovementa);
                    }
                    else{
                        playerxplus(1/playermovementa);
                        playeryminus(1);
                    }
                }
                else if(tempx < playerx && tempy > playery){
                    playermovementa = (tempy - playery) / (playerx - tempx);
                    if(playerx - tempx > tempy - playery){
                        playerxminus(1);
                        playeryplus(playermovementa);
                    }
                    else{
                        playerxminus(1/playermovementa);
                        playeryplus(1);
                    }
                }
                else if(tempx > playerx){
                    playerxplus(1);
                }
                else if(tempy > playery){
                    playeryplus(1);
                }
                else if(tempx < playerx){
                    playerxminus(1);
                }
                else if(tempy < playery){
                    playeryminus(1);
                }
                else{
                    playerismoving = false;
                    playercanlook = true;
                    clearInterval(charspeedcall);
                }
            }
            if(playerismoving == true){
                if(playerx > window.innerWidth / 2 + 100 && GameAreaL1BackgroundPositionx > - (GameAreaL1BackgroundWidth - 1024) ){
                    characteredgescroll = true;
                    playerx = window.innerWidth / 2 + 100;
                    if(- (GameAreaL1BackgroundWidth - 1024) - GameAreaL1BackgroundPositionx <= - charspeed){
                        tempx -= charspeed;
                        GameAreaL1BackgroundPositionx -= charspeed;
                    }
                    else{
                        tempx += - (GameAreaL1BackgroundWidth - 1024) - GameAreaL1BackgroundPositionx;
                        GameAreaL1BackgroundPositionx += - (GameAreaL1BackgroundWidth - 1024) - GameAreaL1BackgroundPositionx;
                    }
                    GameAreaL1.style.backgroundPosition = GameAreaL1BackgroundPositionx + "px " + GameAreaL1BackgroundPositiony + "px";
                }
                else if(playerx < window.innerWidth / 2 - 100 && GameAreaL1BackgroundPositionx < 0){
                    characteredgescroll = true;
                    playerx = window.innerWidth / 2 - 100;
                    if(GameAreaL1BackgroundPositionx <= - charspeed){
                        tempx += charspeed;
                        GameAreaL1BackgroundPositionx += charspeed;
                    }
                    else{
                        tempx += - GameAreaL1BackgroundPositionx;
                        GameAreaL1BackgroundPositionx += - GameAreaL1BackgroundPositionx;
                    }
                    GameAreaL1.style.backgroundPosition = GameAreaL1BackgroundPositionx + "px " + GameAreaL1BackgroundPositiony + "px";
                }
                else{
                    characteredgescroll = false;
                    Player.style.marginLeft = playerx - (window.innerWidth / 2 - 512) + "px";   
                    Player.style.marginTop = playery - (window.innerHeight /2 - 384) + "px";
                }
                if(playery > window.innerHeight / 2 + 100 && GameAreaL1BackgroundPositiony > - (GameAreaL1BackgroundHeight - 768)){
                    characteredgescroll = true;
                    playery = window.innerHeight/ 2 + 100;
                    if(- (GameAreaL1BackgroundHeight - 768) - GameAreaL1BackgroundPositiony <= - charspeed){
                        tempy -= charspeed;
                        GameAreaL1BackgroundPositiony -= charspeed;
                    }
                    else{
                        tempy += - (GameAreaL1BackgroundHeight - 768) - GameAreaL1BackgroundPositiony;
                        GameAreaL1BackgroundPositiony += - (GameAreaL1BackgroundHeight - 768) - GameAreaL1BackgroundPositiony;
                    }
                    GameAreaL1.style.backgroundPosition = GameAreaL1BackgroundPositionx + "px " + GameAreaL1BackgroundPositiony + "px";
                }
                else if(playery < window.innerHeight / 2 - 100 && GameAreaL1BackgroundPositiony < 0){
                    characteredgescroll = true;
                    playery = window.innerHeight / 2 - 100;
                    if(GameAreaL1BackgroundPositiony <= - charspeed){
                        tempy += charspeed;
                        GameAreaL1BackgroundPositiony += charspeed;
                    }
                    else{
                        tempy += - GameAreaL1BackgroundPositiony;
                        GameAreaL1BackgroundPositiony += - GameAreaL1BackgroundPositiony;
                    }
                    GameAreaL1.style.backgroundPosition = GameAreaL1BackgroundPositionx + "px " + GameAreaL1BackgroundPositiony + "px";
                }
                else{
                    characteredgescroll = false;
                    Player.style.marginLeft = playerx - (window.innerWidth / 2 - 512) + "px";   
                    Player.style.marginTop = playery - (window.innerHeight /2 - 384) + "px";
                }
            }
        }
    /* ========== */

    /* Move character calling the movespeed function : Get the direction (pos/neg values of the axes) */
        function charactermovement(){
            /* Set Values */
                tempx = posx;
                tempy = posy;
                playercanlook = false;
                charisdragged = true;
                characterorientation();
                charisdragged = false;
            /* ========== */
            if(target == false){ 
                if(playerismoving == false){
                    playerismoving = true;
                    charspeedcall = setInterval(function(){charactermovementspeed()},1);
                }
            }
        }   
    /* ========== */

    /* Continue to move character if lmb is held */
        function characterdrag(){
            chardrag = setInterval(function(){charactermovement()},1);
            charisdragged = true;
        }
        function characterdragstop(){
            clearInterval(chardrag);
            charisdragged = false;
        }
    /* ========== */
/* ==========*/

Answer 1

This was the closest I could come. I didn't like it that much though because I had to rely on a global. I tried other things like canceling the onmousedown event, but nothing I did could subsequently cause the onclick event from firing.

Incidentally I noticed that rightclick throws an onclick event in FF, but not in Chrome. I didn't check IE.

http://jsfiddle.net/Rsrw4/2/

//global to store whether we rightclicked
var rightclick = false;

//use mousedown to detect rightclick
document.onmousedown = function (e) {
    e = e || window.event;
    switch (e.which) {
        case 1:
            console.log('left');
            break;
        case 2:
            console.log('middle');
            break;
        case 3:
            console.log('right');
            rightclick = true;      //store click in global
            break;
    }
};

//in onclick, which fires after onmousedown, check whether it was from a right click
document.onclick = function (e) {
    if (rightclick) {
        rightclick = false;
        return;
    }
    console.log('onclick');
};

document.addEventListener("contextmenu", function (e) {
    e.preventDefault();
}, false);

Answer 2

You can check the event.button property to check which button was clicked

Answer 3

Douglas Crockford talked about that... Only Microsoft get the mouse buttons right. W3C made it wrong. You can not just disable RMB, you must filter it.

W3C:
* Left button   0
* Middle button 1
* Right button  2

Microsoft:
* Left button   1
* Middle button 4
* Right button  2

Put this peace of code in your event functions, to filter mouse buttons

mouse = e.button || e.which;    // w3s || MS
// ff 0 ie 1
mouse_left = e.button ? this.mouse === 0 ? true : false : this.mouse === 1 ? true : false;// w3c 0; ms 1;
// ff 2 ie 2
mouse_right = this.mouse === 2 ? true : false;  // w3c 2; ms 2; //right mouse button clicked
// ff 1 ie 4
this.mouse_middle = 0;

Use this functions to stop event bubbling and prevent default right click actions:

stop_bubbling = function () {
    obj.e.cancelBubble = true;  // MS inhereted from Netscape
    if(obj.e.stopPropagation){obj.e.stopPropagation();} // w3c
};

prevent_default_action = function () {
    obj.e.returnValue = false;  //MS
    if( obj.e.preventDefault){obj.e.preventDefault();}  // w3c
    return false;
};

Answer 4

Alright I used mrtsherman's code. But I removed the last parts and put the whole thing right into my function, and it triggers the interval if LMB is pressed. I don't really understand the code so... That's why. Also, I already see that, I'm probably gonna have the same problem with future actions, so In the end I might need to use a global anyway, but, still, I'm doing this for my personal pleasure !

function characterdrag(){
    document.onmousedown = function (e) {
        e = e || window.event;
        switch (e.which) {
            case 1:
                console.log('left');
                chardrag = setInterval(function(){charactermovement()},1);
                charisdragged = true;
                break;
            case 2:
                console.log('middle');
                break;
            case 3:
                console.log('right');
                break;
        }
    }
}