События мыши Javascript после mousedown на элементе (img) не работают должным образом - PullRequest
3 голосов
/ 11 июля 2011

Я пытаюсь улучшить свои знания о событиях мыши, поэтому этот вопрос о том, почему то, что я делаю, не работает больше, чем о том, могу ли я использовать модуль перетаскивания.

Я использую 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

РЕДАКТИРОВАТЬ: чтобы попробовать это, введите dojo на любую страницу (с img) с консоли, а затем создайте этот 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". Это гарантирует, что я не получу постоянные вызовы для «перетаскивания», но все же оставлю мне мошеннические вызовы для «перетаскивания», пока я снова не нажму, чтобы сбросить его.

Какие-нибудь советы, почему это происходит?

Ответы [ 2 ]

1 голос
/ 01 сентября 2011

Я недавно столкнулся с проблемой, так как я помню, как я исправил ее с помощью фокуса ()

Это, похоже, исправило мою проблему как в 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();
            }   
0 голосов
/ 23 ноября 2011

Понял - очевидно, что Firefox и другие браузеры по умолчанию обрабатывают клики img, поэтому, включив dojo.stopEvent (evt) в каждый прослушиватель событий, он работал как положено.

...