Question

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

我正在制作一个基于two.js的互动游戏，其中包含拖动内容。我需要检测鼠标何时被释放，而不管画布上是否（或不是）。元素（SVG画布元素）捕获鼠标事件并阻止画布鼠标事件检测。

鼠标事件：

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

因此，我可以将对象的事件处理程序解决，该对象仅在该对象中发生，或者将其发送到画布，这只会在没有对象的情况下发生。附加到两者将是不优雅的，并且将需要在代码中进行重大的重新构造（我承认，凌乱）;

Example elements that steal the mouse events in the inspector

我希望不要再问。我抬头试了几个小时。谢谢！

Answer 1

确定。所以我尝试了一种尝试更好地思考javascript的方法。主要是我来自其他OOP学派;这就是为什么很难解开我对原型对象的理解。

我创建了一个名为pointer的全局函数，以及其他名为draggable的函数，它在每个要拖动的对象的原型中。在这个函数和任何可以拖动东西的对象（画布）上，我附加了函数onRelease和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);
    });
}

};

所以将与可拖动

原型混合的节点

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感觉更舒服。

顶级鼠标事件处理程序

1 个答案: