MooTools - Как получить положение мыши при отправке формы? - PullRequest
Новая
       4

MooTools - Как получить положение мыши при отправке формы?

2 голосов
/ 15 февраля 2011

То, что я пытаюсь сделать здесь, это показать окно загрузки, которое следует за курсором после отправки формы с помощью MooTools. Тем не менее, я упростил задачу до 1 формы и 1 формы.

сценарий: 

document.addEvent('domready', function(){

    $('test_form').addEvent('submit', function(){
        var box = $('box');

        document.addEvent('mousemove', function(e){
            box.setStyles({
                top: e.page.y,
                left: e.page.x
            });
        });


        box.setStyle('display', 'block');

        return false;
    });
});

HTML: 

<div id="box">
</div>

<form id="test_form" action="">
    <label>Name: </label><input type="text" name="name" /><br/>
    <input type="submit" value="Submit" />
</form>

CSS: 

#box {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: absolute;
    display: none;
}

#test_form {
    margin-left: 150px;
}

Когда форма отправлена, она покажет скрытый синий div и будет следовать за курсором. Тем не менее, я не могу заставить div появляться в позиции мыши при отправке формы. «Mousemove» не будет срабатывать, пока мы не переместим мышь; таким образом, синий div появляется в позиции (0,0) сразу после показа. Есть ли способ получить положение мыши сразу после отправки формы? Или есть альтернативный способ сделать это?

Любые предложения приветствуются!

Обновлен:

Я не хочу добавлять событие мыши (mousemove) перед отправкой формы. Причина в том, что я не хочу, чтобы JavaScript продолжал проверять положение мыши, когда в этом нет необходимости. Просто постарайтесь избежать проблем с производительностью!

1 Ответ

1 голос
/ 15 февраля 2011

По сути, submit - это событие, но его event.type - это submit и оно не будет содержать информацию о мышке.

Ваша ставка состоит в том, чтобы перестроить ваш javascript так, чтобы он все время перемещал окно спокойно и просто отображал окно, изменяя отображение при отправке. что-то вроде этого:

http://jsfiddle.net/jtLwj/

(function() {
    var box = $('box');

    document.addEvent('mousemove', function(e) {
        box.setStyles({
            top: e.page.y,
            left: e.page.x
        });
    });

    $('test_form').addEvent('submit', function(ev) {
        ev.stop();
        box.setStyle('display', 'block');
        var sizes = box.getPosition();
        box.set("html", [sizes.x, ' x ', sizes.y].join("<br/>"));
    });
})();

чтение позиции поля после отправки вернет ваш курсор:)

недостаток: задержка изменения css для окна invis перед отправкой.

edit лучшая версия без изменения dom постоянно: 

(function() {
    var lastEventObject, eventListener = function(e) {
        // keep a scoped referene of the last known mouse event object
        lastEventObject = e;
    };

    document.addEvent('mousemove', eventListener);

    document.id('test_form').addEvent('submit', function(e) {
        e.stop();
        // not needed anymore...
        document.removeEvent("mousemove", eventListener);

        // show the box at last known mouse loc
        document.id("box").setStyles({
            display: 'block',
            left: lastEventObject.page.x,
            top: lastEventObject.page.y
        });

        // attach to mousemove or whatever....

    });
})();

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

скрипка: http://jsfiddle.net/dimitar/jtLwj/1/

...