2

私がここでやろうとしているのは、MooToolsを使用してフォームを送信した後、カーソルの後に続く読み込みボックスを表示することです。ただし、問題を1つのdivと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がマウスの位置をチェックし続けたくないからです。パフォーマンスの問題を回避するようにしてください。

4

1 に答える 1

1

基本的に、送信はイベントですが、そのevent.typeは送信であり、マウス情報は含まれません。

あなたの賭けは、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/>"));
    });
})();

送信後にボックスの位置を読み取ると、カーソルが返されます:)

欠点：送信前にinvisボックスのcssを変更するまでの待ち時間。

常に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/

于 2011-02-15T14:26:25.030 に答える