javascript - 顶级鼠标事件处理程序

Question

嗯。也许是我无法找出正确的搜索关键字，因为我在 javascript 的某些领域是新手。

我正在制作一个基于two.js 的互动游戏，其中包括拖动东西。我需要检测鼠标何时被释放，无论 Canvas 上有(或没有)元素。这些元素(SVG Canvas 元素)捕获鼠标事件并阻止 Canvas 鼠标事件检测。

鼠标事件:

$("#canvas").on("mousemove", function(e){
    //do stuff
}).on("mousedown",function(){
    //do stuff
}).on("mouseup",function(){
    //do stuff
})

因此，我可以将事件处理程序寻址到一个对象，这只会在该对象内发生，或者将其寻址到 Canvas ，这只会在没有对象出现时发生。附加到两者将是不优雅的，并且需要对庞大的代码进行重大重构(我承认，很困惑)；

Example elements that steal the mouse events in the inspector

希望不要再问了。我已经查找并尝试了几个小时。谢谢!

Answer 1

好的。所以我尝试了一种方法，试图更明智地思考 JavaScript。我主要来自其他 OOP 思想流派；这就是为什么很难解开我对原型(prototype)对象的理解。

我创建了一个名为pointer的全局函数，另一个名为draggable，它位于每个要拖动的对象的原型(prototype)中。在此函数以及任何可以拖动的对象( Canvas )上，我附加了 onRelease 和 release 函数。当鼠标按钮被释放时，它会运行其release函数，该函数会触发pointer.release()。指针会有一个被拖动的任何对象的数组，因此当它收到释放时，会触发每个被拖动元素的onRelease，将鼠标下方的对象传递出去。因此，被拖动的对象最终会收到事件处理对象(释放鼠标的对象)。

希望这个方法不会产生任何捂脸的情况。如果是这样，我想了解如何更好。

var pointer={
 pos:{x:0,y:0},
 dragging:false,
 //who will be the object that detected the mouse released. see below
 mouseUp:function(who){
    for(drg in this.dragging){
           //look if the -being-dragged- object does have the function
            if(typeof(this.dragging.onRelease)=="function")
                this.dragging.onRelease(who);
        this.dragging=false;
    }
  }
}

这是可拖动类。最后一部分是唯一相关的部分，其余部分用于上下文目的:

function Draggable(){
this.main=this;
if(!this.pos)
    this.pos={x:0,y:0};
this.dragging=false;
this.hover=false;
this.sprite=false;
this.move=function(pos){
    this.sprite.translation.x=pos.x;
    this.sprite.translation.y=pos.y;
    this.pos=pos;
    this.moving();
}
this.moving=function(){}
this.release=function(){
    pointer.mouseUp(this);
}
this.init=function(){
    //fallback sprite is a circle
    if(!this.sprite)
        this.sprite=two.makeCircle(0,0,this.rad);

    this.move(this.pos);
    two.update();
    this.elem=$(domElem(this.sprite));
    //attach a this to the dom element to make back-scope
    this.elem[0].main=this;
    //append jquery functions to this object's dom sprite
    //pendiente: this may need to go in the pointer object, isn't it?
    this.elem.on("mouseenter",function(){
        this.main.sprite.fill="rgba(127,127,255,0.7)";
        this.main.hover=true;
    }).on("mouseleave",function(){
        this.main.sprite.fill="rgba(127,127,255,0.3)";
        this.main.hover=false;
        //avoid pieces stuck to mouse. should this be?
        /*this.main.dragging=false;
        this.main.release();
        pointer.dragging=false;*/
    }).on("mousedown",function(){
        this.main.dragging=this.main.hover;
        pointer.dragging=this.main;
    }).on("mouseup",function(){
        //the important part is here: it triggers an pointer.mouseUp
        this.main.dragging=false;
        this.main.release();
        pointer.mouseUp(this);
    });
}

};

因此该节点将与可拖动元素进行原型(prototype)混合

function Node(ind){
 //just to make more console-friendly
 this.name="node"+ind;
 this.pos=a;
 this.ind=ind;
 this.par=par;
 this.broc;
 this.sprite=two.makeCircle(0,0,brocSize*1.2);
 this.sprite.addTo(layer[2]);
 this.$elem=$(domElem(this.sprite));
 main=this;
 //these are triggered by their draggable bit
 //who, is the subject over which mouse was released
 this.onRelease=function(who){
    //if(typeof(who)=="Broc")
    console.log(who);
    this.move(this.broc.pos);
    console.log("this:");
    console.log(this);
  }

  //pendant: make the abspos function once an unpack
  this.son=false;
  this.active=false;
};

这实现了一些 jQuery，稍后可能会被纯 JavaScript 取代，出于原型(prototype)和学习的目的，我对 jQuery 感觉更舒服。