javascript - 仅使用 LMB 启动 onclick/onmousedown

Question

好吧，我试图在互联网上搜索并没有找到如何做到这一点。我发现的一切只是在右键单击时禁用上下文菜单。关键是：我正在（试图）制作一个（简单的）游戏。我有我的脚本来移动我的播放器，但是 onclick/onmousedown（实际上是所有的鼠标事件）可以用 LMB 和 RMB 触发。我真的不在乎右键单击是否有效，真正的问题是我将鼠标按下时的间隔设置为“on”，鼠标按下时设置为“off”；（拖动角色）；如果我同时向 LMB 和 RMB 发送垃圾邮件，则在某一时刻间隔不会关闭，它会在没有按下任何按钮的情况下拖动角色。再次单击甚至不会重置间隔。

如果需要，我可以粘贴代码，但我对 javascript 还很陌生，我想这很混乱而且错误。但是，嘿，到目前为止，一切都很好。

好吧，让我们去看看代码......如果到目前为止有 2 个文件，一个“主要”，另一个用于角色移动......不，这真的没有帮助，因为我不能简单地发布我需要的部分，因为它们都是相互关联的*(?);

主要代码：

/* ==========
 * 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;
        }
    /* ========== */
/* ========== */

以及人物动作：

/* ==========
 * 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;
        }
    /* ========== */
/* ==========*/

score 0 · Accepted Answer

0

您可以检查event.button属性以检查单击了哪个按钮

于 2013-01-24T02:56:52.120 回答

score 0 · Accepted Answer

这是我能来的最接近的。不过我不太喜欢它，因为我不得不依赖全局。我尝试了其他方法，例如取消 onmousedown 事件，但我所做的任何事情都不会导致 onclick 事件触发。

顺便说一句，我注意到右键单击会在 FF 中引发 onclick 事件，但不会在 Chrome 中引发。我没有检查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);

score 0 · Accepted Answer

道格拉斯·克罗克福德（Douglas Crockford）谈到了这一点……只有微软才能正确使用鼠标按钮。W3C 弄错了。你不能只禁用人民币，你必须过滤它。

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

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

将此代码和平放在您的事件函数中，以过滤鼠标按钮

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;

使用此函数停止事件冒泡并防止默认的右键单击操作：

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

score 0 · Accepted Answer

好吧，我使用了 mrtsherman 的代码。但是我删除了最后一部分并将整个内容放入我的函数中，如果按下 LMB 则会触发间隔。我真的不明白代码所以......这就是为什么。另外，我已经看到了，我可能会在未来的操作中遇到同样的问题，所以最后我可能需要使用全局变量，但是，我仍然这样做是为了我个人的乐趣！

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

javascript - 仅使用 LMB 启动 onclick/onmousedown

4 回答 4

Related

Reference