Javascript 顶级鼠标事件处理程序

嗯，也许是因为我不知道正确的搜索关键词，因为我在javascript的某些领域是新手

我正在制作一个基于two.js的交互式游戏，其中包括拖拽东西。我需要检测鼠标何时释放，而不管画布上有（或没有）哪些元素。元素（是SVG画布元素）捕获鼠标事件并阻止画布鼠标事件检测

鼠标事件：

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

因此，我可以将事件处理程序寻址到一个对象，这将只发生在该对象中，也可以将它寻址到画布，这将只发生在没有对象覆盖的情况下。附加到这两者是不合法的，并且需要对代码进行重大的重组，这是巨大的（我承认，是混乱的）

---

我希望不要再问了。我已经查了好几个小时了。谢谢

好的。所以我尝试了一种方法，试图从javascript的角度来思考。我主要来自另一个OOP学派；这就是为什么很难解开我对原型对象的理解

我创建了一个名为pointer的全局函数，以及另一个名为draggable的函数，它位于要拖动的每个对象的原型中。在这个函数上以及在任何可以拖动东西的对象（画布）上，我附加了函数onRelease和release。释放鼠标按钮时，它会运行其释放函数，从而触发指针。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);
    });
}

})

因此，将原型与可拖动对象混合的节点

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取代，出于原型和学习目的，我觉得jQuery更适合使用。

好的。所以我尝试了一种方法，试图从javascript的角度来思考。我主要来自另一个OOP学派；这就是为什么很难解开我对原型对象的理解

我创建了一个名为pointer的全局函数，以及另一个名为draggable的函数，它位于要拖动的每个对象的原型中。在这个函数上以及在任何可以拖动东西的对象（画布）上，我附加了函数onRelease和release。释放鼠标按钮时，它会运行其释放函数，从而触发指针。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);
    });
}

})

因此，将原型与可拖动对象混合的节点

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取代，出于原型和学习的目的，我觉得jQuery更适合。

可能是重复的，所以没有任何类型的全局鼠标事件？只有对象侦听器？太可怕了！尽管您可以使用

$（document.bind（“单击”，function（）{}）

要将点击事件实际绑定到整个文档，解决您提出的问题，也许看一下答案会有所帮助，对不起，没有进一步解释“重复”标志…可能重复，所以没有任何类型的全局鼠标事件？只有对象侦听器？太可怕了！尽管您可以使用

$（document.bind（“单击”，function（）{}）

要将点击事件实际绑定到整个文档中，要解决您提出的问题，也许看一下答案会有所帮助，抱歉，没有进一步解释“重复”标志。。。