jquery bindがとまらない

質問

jquery の bindを使い、以下のサイトを参考にしながら、実装を試みているのですが、unbindしてもとまらなくなってしまいました。
mousedown、mousemove、mouseup を使い、mousedownした時点のx座標と、mousemoveしている間のx座標の差を取り、mouseup時に移動距離を表示するというものをとりあえず作りたいのですが、mousemoveが永遠続いてしまい、mouseupしてもとまりません。

$('#main_body').mousedown(function(e){
now_x = e.pageX;
alert(now_x);
$(document).mousemove(function(e){
now_x2 = e.pageX;
alert(now_x2);
})

}).mouseup(function(){
alert("bbbb");
$(document).unbind("mousemove");
});

これですと、now_x2がずっと出続けてしまいます。。。
どうか、お力をお貸しください。
よろしくお願い致します。

参考サイト：
http://weble.org/2011/03/08/jquery-floatingbox

回答No.2

H240S18B73 · ベストアンサー

まず最初に言ったように
alertが溜まってるだけだと思うよ、alertは溜まるからね
溜まってるのが全部出終わるまで延々で続けるからね

mousemoveってブラウザが調子いいと１秒間に６０回起きたりするからね
１秒間ドラッグしたら６０個alert溜まるのよ

だからalertするんじゃなくてどっかにtext()なりで表示するとか
FireFoxでFireBugs使ってるならconsole.log()使うとか

なんせalert()はtrace()みたいに使うもんじゃないからね

$(function(){
$("body").append("<p id='alert'></p>");
$('#main_body').mousedown(function(e){
now_x = e.pageX;
$("#alert").text(now_x);
$(document).mousemove(function(e){
now_x2 = e.pageX;
$("#alert").text(now_x2);
}).mouseup(function(){
$("#alert").text("bbbb");
$(document).unbind("mousemove");
});
});
});

お礼

アドバイスありがとうございます。
原因は別にありましたが、うまくいきました。
ありがとうございました

回答No.1

H240S18B73

ひとつには、alert()が溜まってるだけじゃないのかな？
ベストコンディションでブラウザが走ってたら
mousemoveとか60/秒ぐらい起きる訳だし

あとmouseupイベントをリスニングしてるのは
#main_bodyなわけだから#main_body上で
マウス離さないとダメよね

コレってFlashでドラッグ＆ドロップできるオブジェクト
作る時にもよくある問題で、オブジェクトがドラッグについてこれずに
マウスが外れて意図しないところで落っことしちゃうとか
ユーザーがドラッグしたまま外まで行っちゃうってのがあるのよね

対処としてはmousedownはそのオブジェクト自体にリスニングさせるけど
mouseupはドキュメントにリスニングさせるとか
ドキュメントからのmouseoutもmouseupと同じ扱いにしておくとか
mousedownされたところ以外でmouseupされた場合に供えておくカンジ

多分同様の対処はjavascriptでもいると思う

お礼

H240S18B73 様

いつも大変お世話になっております。
お礼が遅くなりまして申し訳ございません。

早速のお返事を頂きましてありがとうございます。

しかし残念ながら、以下のように記述を変更しましても、解決には至りませんでした。

$('#main_body').mousedown(function(e){
now_x = e.pageX;
alert(now_x);

$(document).mousemove(function(e){
now_x2 = e.pageX;
alert(now_x2);
}).mouseup(function(){
alert("bbbb");
$(document).unbind("mousemove");
});

});

大変恐縮ではりますが、もう一度添削をお願いできませんでしょうか。

>多分同様の対処はjavascriptでもいると思う

この部分なのですが、イマイチよくわかりません。ここは一体どういう意味なのでしょうか。

お手数ですが、どうぞよろしくお願い致します。