どうも。11か月ぶりのWEBおじさんです。
相変わらず業務と子供に追われている毎日です。
今回11か月ぶりに更新しようと思った理由は、「あれ、これもしかして同じようなことで悩んでいる、もしくは対処法を探しているpeopleがいるんじゃないかと思って、書いておこうと思った次第です。
といっても、chatGPT教授が赴任して来てしまったせいで、Google先生に聞くpeopleは数少なくなり、chatGPT教授に聞くpeopleが多くなってしまった今日この頃ですが、少なくなってもここにたどり着いたpeopleの為に、書き続けます。
ということで、本編スタート。
何が問題なのか
改めて、今回は「JS（jQeury）でmouseupを使うとき、指定の要素上でクリック、ドラッグして要素外に移動してからクリックボタンを離すと処理が実行されない件」ですが、さっそくこちらがデモになります。
何が問題か、ということをデモで確認していただきたい。
本来、デモの赤い要素上でmouseupは完了するようなイベントなのですが、要素の大きさが小さく、またドラッグでスライドさせるような要素（下参考画像内の丸をスライドさせて数値を変更するようなもの）の場合、クリックするときは当然丸の上でクリックするのですが、ドラッグした際にマウスポインタが丸から出てしまうことはかなりあるんじゃないかと思っております。
mouseupを使用する場合、通常であれば以下のようなソースになる感じです。
【jQeuryサンプル１】
$(‘要素名’).on(‘mouseup’,function(){
//実行させる処理
});
これでまぁ動くんです。実際、デモの赤いところの処理はこんな感じで動いてます。
しかし、赤いところでクリックしてドラッグさせて赤い要素の外にポインターを移動させてクリックボタンを離すと処理が実行されない。。。
デモのような要素の場合はドラッグさせて要素外でクリックボタンを離すことなんて滅多にないことなので別に問題はなさそうなんですが、先ほども言った通り上の参考画像のようなスクリプトが入っている場合、丸をスライドさせて値を変更させるため、丸でクリックしてからドラッグした際に丸からポインタが出てしまうことが多々あり、その時に処理が実行されていないと「バグじゃん。動かねーじゃん。」というようなクレームがクライアントから入るわけです。
なので、目的としては、指定の要素でクリック、ドラッグしてその要素の外にポインタが出てしまってからクリックボタンを離してもクリックした要素の処理を実行させたい、ということになりますね。
解決編
ということで、当然ですがまずはGoogle先生にお尋ねしてみます。
そうすると、まぁいろいろと出てきたのですが、ちょっと探すことが面倒になってしまったのと、chatGPTも使ってみたい、という欲望にかられ、chatGPT教授にも聞いてみることにしました。
すると、以下のようなソースで実行させることができる、と自信満々に返ってきました。
【jQueryサンプル2】
$(要素名).on(“mousedown”, function () {
$(document).on(“mouseup.customEvent”, function () {
// 実行したい処理
console.log(“mouseup 発生”);
// イベントの解除
$(document).off(“mouseup.customEvent”);
});
});
こうすることで、mousedownした場合に限り、mouseupをdocumentで検知することができるとのこと。
実際入れてみたところ、ホントにできた！
このソースの”ミソ”はcustomEventのonとoffですね。
実はこのソースを書くとき、offの方を書き忘れてしまい、「なんだよ、できねーじゃん。大したことねーな、chatGPT教授もよ。」と思ってしまっていた。
しかし、よく見てみるとoffの記述が書いてなく、これを追加したら希望している挙動になった！
「やはりこれからはchatGPT教授なのか。。。」
と少し寂しくもなりつつ、今回の問題を解決したのだった。。
それでは、またいつか。。。
WEBおじさんでした。。。
