鼠标按下项目（img）后的Javascript鼠标事件未按预期工作答案

【问题标题】：Javascript mouse events after mousedown on item (img) not working as expected鼠标按下项目（img）后的Javascript鼠标事件未按预期工作
【发布时间】：2011-07-11 18:19:54
【问题描述】：

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

我正在使用 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 事件.

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

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

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

【问题讨论】：

从未使用过dojo库，但听起来可能与事件冒泡有关。
Firefox 拖拽只会触发一次，Chrome 会触发几次。而且我认为事件冒泡不会影响断开连接是否有效……事实上，在 mouseup 和随后的断开连接之前触发“拖动”这一事实对我来说意味着 c 应该及时连接，以便 mouseup 断开连接跨度>
能否也为 this.drag 添加代码？
现在应该可以轻松测试了

标签： javascript drag-and-drop dojo mouseevent mousemove

【解决方案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();
            }

【讨论】：

【解决方案2】：

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

【讨论】：