鼠标按下项目（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）上注入dojo，然后创建此obj并运行obj.init（）。使用 1.5 注入：

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

Answer 2

弄清楚了 - 显然 Firefox 和其他浏览器对 img 点击有默认处理，因此通过在每个事件监听器中包含 dojo.stopEvent(evt) ，它可以按预期工作。