mousemoveイベントで画像の拡大・縮小を行いたい２(要素の拡大・縮小時のエラー等)

Question

タイトルの通り、mousemoveイベントで要素の拡大・縮小を作成しました。
要素の端をクリック(mousedown→mousemove)すると、カーソルの座標位置に合わせて要素が拡大・縮小します。
前回の質問の延長になりますが、教えて頂きたくお願い致します。

前回の質問：
https://teratail.com/questions/335946

流れ：

ダブルクリック　→要素を作成
作成した要素の端をmousedown→mousemoveイベントで要素の拡大・縮小が行われる

問題点：

・要素を拡大する時に、要素がブレながら拡大される(縮小時は特に問題なし)
・エラーが表示される(mousemoveイベントは処理されてるのになぜ？)

下記エラー内容：

Uncaught TypeError: Cannot read property 'style' of null
at HTMLDivElement.element.onmousemove (pen.js:125)

対象コード：

obj.elm.style.width = e.offsetX + 'px';

やりたいこと：

上記問題点を解消したい。

全体ソースコード：

https://codepen.io/mio-rei/pen/ExWjyKb

ソースコード抜粋：

// マウスダウン(要素の移動　初期動作)
    const mouseDown = (e) => {
        let t =e.target;
        obj.elm = t;
        if(t.nodeName != 'IMG' && t.nodeName != 'TEXTAREA') return;
        if ( e.offsetX < 5 || e.offsetX > t.offsetWidth -5 ||
             e.offsetY < 5 || e.offsetY > t.offsetHeight -5) {
          //要素の端をクリックしたら要素を拡大・縮小する
                console.log('test成功です');
                mousemove();
      
        } else { 
          /*要素の端以外の場所をクリックしたら
          要素を移動する*/
        }
    };
      
//マウスムーブ(要素の移動(画面端))
    const mousemove = () => {
        element.onmousemove = (e) => {
        obj.elm.style.width = e.offsetX + 'px';
        obj.elm.style.height = e.offsetY + 'px';
        }
    }

    
 // マウスムーブ(要素の移動(画面端以外、未完成))
/*
    const mouseMove = (e) => {
        if(!obj.elm ) return;
        obj.setPos(e, obj);
        obj.setOffset(e);
        };
*/

// マウスアップ(要素の移動　キャンセル)
    const mouseUp = () => {
        if(obj.elm) {
            obj.elm = null;
        }
    };

Answer 1

・要素を拡大する時に、要素がブレながら拡大される(縮小時は特に問題なし)
e.offsetは要素内の座標値を取得する。
この場合だと、カーソルは二つの要素の座標を取得している(elementとobj.elm=textera)
カーソルをゆっくり動かす分にはいいが、すばやく動かすとtextaraの要素からはみ出る。
はみ出た時に、element要素の座標位置を取得する事になる。
縮小する場合は、textareaの要素内だけにカーソルの位置が入っているので問題ないが、
拡大する時は、textareaとelementの要素の座標位置を行ったり来たりしているので、要素がブレる現象が起きている。

解決法：
offsetX→clientXを使用する。
clientXはブラウザの表示エリアを取得するため、取得座標は一種類になる。
そして、座標位置を下記の様に計算して取得すれば、要素がブレることなくtextarea拡大・縮小ができるようになる。

const mousemove = (e) => {
const elmsubX = obj.elm.getBoundingClientRect().left - cRect().left;
const elmsubY = obj.elm.getBoundingClientRect().top - cRect().top;

    obj.elm.style.width = e.clientX - cRect().left - elmsubX + 'px';
    obj.elm.style.height = e.clientY - cRect().top - elmsubY + 'px';
}

・エラーが表示される(mousemoveイベントは処理されてるのになぜ？)
理由はmousemoveイベントが継続した状態が続いているから。
mouseupイベントでobj.elm = null;にして中身を空にしてmousemoveのイベントをキャンセルしているが、実際はこれだとmousemoveは動いたままである。
状況によっては要素の中身をnullにしてキャンセルするような動作ができるが、mousemoveイベントが継続している状態のままobj.elmの中身をnullにしているため、エラーとなる。

解決法：
obj.elm=nullの代わりにイベントキャンセルを行うコードを記入

const mouseUp = () => {
element.removeEventListener('mousemove', mouseMove);
element.removeEventListener('mousemove', mousemove);
}

Answer 2

mouseUpでobj.elm = null;しているからobj.elm.styleがエラーになっているのでは？

Comments

[rei78087487]

前回に引き続き回答ありがとうございます。

なぜ、obj.elm = null;にするとエラーが起きるのでしょうか？
また、obj.elm = null;にすることでmousemoveイベントを解除しているのですが、それを無くすとなるとmousemoveの解除ができなくなるので、どの様に対処すれば宜しいでしょうか？

ご教示お願い致します。

[itagagaki]

obj.elmがnullのときobj.elm.styleがエラーになる理由がわからないのなら、失礼ですがプログラミングの基礎がない状態ですね…。すみませんが、ちょっと私にはどう答えたらよいかわかりません。