鼠标按下项目 (img) 后的 Javascript 鼠标事件未按预期工作

Question

我正在努力提高我的鼠标事件知识，所以这个问题是关于为什么我正在做的事情比我是否可以使用拖放模块更有效。

我正在使用 Dojo，并且已连接到 mousedown 和 mouseup 事件。当出现不是右键单击的mousedown事件时，我为mousemove设置了一个连接。在随后的 mouseup 事件中，我断开了该事件。这是代码的样子:编辑(做了什么应该是一个独立的例子)

obj = {

    init: function(){
        var c;
        dojo.connect(dojo.doc, "mousedown", this, function(evt){
            this.down(evt);
            if(evt.button != dojo.mouseButtons.RIGHT){
                this._isDown = true;
                c = dojo.connect(dojo.doc, "mousemove", this, "drag");
            }
        });
        dojo.connect(dojo.doc, "mouseup", this, function(evt){
            dojo.disconnect(c);

            this._isDown = false;
            this.up(evt);
        });
    },//end init

    drag: function(evt){
        console.log("Mouse drag",evt);
    },

    up: function(evt){
        console.log("Mouse up",evt);
    },

    down: function(evt){
        console.log("Mouse down",evt);
    }
}//end obj

编辑:要尝试这一点，请使用控制台在任何页面(带有 img)上注入(inject) dojo，然后创建此 obj 并运行 obj.init()。用 1.5 注入(inject):

document.documentElement.firstChild
    .appendChild(document.createElement("script"))
    .src='http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js';

它对我来说看起来是对称的，如果我点击文档的大部分内容，它工作正常。但是，如果我点击一个图标并拖动它，“拖动”功能只会被调用一次(连接应该已经完成​​，所以光标的每次移动都会调用它)，并且当我释放鼠标时不会调用 mouseup 事件.

然后下次我按下 mousedown 时，它会用一个新连接覆盖 c，这样我就永远无法断开前一个连接，因此我打算只为拖动而激活的东西变成了永久事件。

我实现的一个糟糕的解决方案是在连接“mousedown”连接之前断开连接。这确保我不会收到“拖动”的永久调用，但仍然会给我留下“拖动”的流氓调用，直到我再次单击以取消设置。

关于为什么会发生这种情况的任何提示？

Answer 1

我最近遇到了一个问题，因为我记得用 focus() 修复了它

这似乎解决了我在 IE 和 FF 中的问题

       function mouseOverActive(e)
            {               
                //attach listener to document 
                e = e || event;
                var who = e.target || e.srcElement;
                       overlayEditor.attachListeners($_(who.id),'mouseout',mouseOutActive);
                $_(who.id).focus();
                     overlayEditor.attachListeners($_(who.id),'keydown',keypress);  
                     overlayEditor.attachListeners($_(who.id),'keyup',keyrelease);  
            }

        function mouseOutActive(e)
            {
                //attach listener to document 
                e = e || event;
                var who = e.target || e.srcElement;
                var o = $_(who.id);

                overlayEditor.removeListener(o,'mouseout',mouseOutActive);  
                overlayEditor.removeListener(o,'keydown',keypress);
                overlayEditor.removeListener(o,'keyup',keyrelease); 

                this.sbc_Aternative = false; 
                    visualTextSwitch(o,'off');

                o.blur();
            }