# はじめに

これは、システムの不具合でもなく、あたかもそう見えるような処理をしていたためです。この原因を突き止めるには、難儀しました。ページでテキストを選択すると、AIアシスタントを実行するようにしたプラグインを作成したのですが、そこで発生しました。

テキスト選択時に、なぜか、popmsgセレクターをドラッグして、マウスをアップすると元の位置に戻ってしまいます。しかし、選択したテキストを解除したあとに、ドラッグすると正常にドラッグできます。

また、デバッガーを開いた状態でも、正常にドラッグします。以下に、その時の顛末を記述します。

# 結論から言いますと

これは、mouseupイベント処理に問題がありました。
以下は、そのコード全体です。

$("body").mouseup((e)=>{
        //問題のコード
        //#popmsgの時は、スキップ
//        if(e.target.id ==="popmsg"){
//            return;
//        }
        
        e.preventDefault();
        //ここで、modeSwをチェック
        example().then((data)=>{
                if(data==="使用する"){
                     //ここで、チェックか、okボタンか 
                     if(e.target.id==="ok"){
                          try {
                               //alert("50でopen)");
                                 if(location.pathname==="/chat/s/n"){
                                     window.open("https://search.yahoo.co.jp/chat/s/n?q="+$("#qq_text")[0].value+"&s=request_parameter_question", "_self");
                                 }else{
                                     window.open("https://search.yahoo.co.jp/chat/s/n?q="+$("#qq_text")[0].value+"&s=request_parameter_question", "_blank");
                                 }
                          } catch (e) {
                               console.log(e.data);                                  //■プラグインがインストールされていないケース
                          } 

                          //alert("okボタンクリック");
                     }else if(e.target.id==="cancel"){
                          $("#popmsg").css("display","none");
                          return false;
                      }else{
                          

                      }
                      //
                      run();
                      return false;
                      

                }
        });
    });
    /*************************************************************************
    *msgオブジェクト定義  
    *********************************************************************************/
    async function run(){
     try{
         await aaa();


     }catch(err){
         console.log(err);

     }

    }
    //
    function aaa(){
                //
                qq = window.getSelection().toString().replace("#","%23");
                //ここで、#は、%23でエンコードする。

                //alert("選択されたqq= "+qq);
                //
                if(qq===""){
                    //alert("質問が空白です。テキストを選択してください。");

                }else{
                    //ここで、再生リンクの時は、confirmを出さないで抜ける。
                    //ここで、質問に追加したい場合があります。そのため、自作のpop画面にします。
                         console.log("この質問を変更しますか。");
                         //

                         $("#popmsg").remove();
                         $("body",parent.document).append("<div id='popmsg' style='overflow:auto;font-weight:bold;font-size:1.3em;z-index:999999;background-color:lightpink;position:fixed;top:9px;left:266px;width:700px;height:180px;'><span style='background-color:lightblue;'>AI_assistantプラグインv3.0</span><br>このタブは、「"+qq+"」で、起動されました。<textarea id='qq_text' style='width:650px;height:56px;'>"+qq+"</textarea><br>\n\
    <button id='ok' style='background-color:lightgreen;'>OK</button>  <button id='cancel' style='background-color:lightyellow;'>キャンセル</button></div>");
                         //
                         $("#cancel").click('click',(e)=>{
                             $("popmsg").css("display","none");

                         });
                         //
                         $("#popmsg").draggable(()=>{
                             drag:(event,ui)=>{
                             //選択を消すとか
                             window.getSelection().removeAllRanges();
                            };
                         });
                    
                        //$("#popmsg").draggable();
                         const box = document.querySelector('#popmsg');
                         box.scrollTop = box.scrollHeight;


                }

    }           

});

　上記のコードは、テキスト選択して、mouseupをした時のイベントリスナーを当初、作成していました。その時は、最初の「問題のコード」にある数ステップのコードはありませんでした。この箇所で、問題を引き起こしていました。

# 実際の動作は

実際の動作を確かめるには、AI_assistantプラグインv3.0をインストールしなければなりません。もし、差支えなければ、installして確認できます。

任意のページでテキスト選択するとポップアップが表示されます。そのポップアップ画面をドラッグして、マウスを離すと元の位置に戻ってしまうのです。

この時、あらかじめ、AI_assistantプラグインv3.0の拡張機能ボタンのポップで、プラグインを「使用する」をクリックしておきます。

この状態で、テキストを選択するとポップアップ画面が表示されます。

以下は、その時のポップ画面です。

このピンク色のポップをドラッグするともとに戻ってしまいます。その時、「# はじめに」は、テキスト選択状態です。不思議なことに、このテキスト選択を解除すると、ドラッグが正常にできます。また、デバッガーを開いた状態でも正常にドラッグできます。

このような状況の中での不思議な動作です。

# 原因がわかりました。

わかってしまえば、何ということはありません。
先頭の処理で、以下のセレクターチェックを入れればOKでした。
mouseupイベントの発生原因がふたつあったことです。

(1)テキスト選択時
(2)セレクターのドラッグ時

このふたつでmouseupイベントが入っていました。もともと、このmouseupイベントは、テキスト選択して、AIアシスタントを起動する処理でした。そこへ、あとから、ポップアップセレクターをドラッグするコードを追加したため、2種類のイベントが入ることになったためでした。

# 対処方法

そこで、このmouseupイベント処理の先頭で、ポップアップセレクターをチェックして以後の処理を続行しないようにしました。

//
$("body").mouseup((e)=>{
        if(e.target.id ==="popmsg"){
            return;
        }
        ...
});

続けて処理をしているとこのドラッグ戻り現象が発生するようになっていました。そこで、ポップアップ画面の初期化があり、元の位置に表示していました。

この処理で、位置の初期設定をしていました。それがあたかも、元の位置に戻るように見えたのが原因でした。

$("#popmsg").remove();
$("body",parent.document).append("<div id='popmsg' style='overflow:auto;font-weight:bold;font-size:1.3em;z-index:999999;background-color:lightpink;position:fixed;top:9px;left:266px;width:700px;height:180px;'>
<span style='background-color:lightblue;'>AI_assistantプラグインv3.0</span>
<br>このタブは、「"+qq+"」で、起動されました。<textarea id='qq_text' style='width:650px;height:56px;'>"+qq+"</textarea><br>\n\
<button id='ok' style='background-color:lightgreen;'>
OK</button>  
<button id='cancel' style='background-color:lightyellow;'>キャンセル</button>
</div>");

# あとがき

何でもそうですが、わかってみれば、納得できます。
これからも注意したいと思います。