TypeScript の OnClick イベント タイプ

1. TypeScript の onClick MouseEvent インターフェイス
2. React で onClick MouseEvent を使用する
3. TypeScript で MouseEvent インターフェイスを拡張する

onClick イベントは、ユーザーが HTML ページのテキスト、画像、または数値の一部をクリックするとトリガーされます。 多くの属性がクリック イベントに関連付けられており、その一部を使用して特定の機能を実現できます。

TypeScript で onClick イベントを回避するにはさまざまな方法があります。 このチュートリアルでは、これを実現する方法のいくつかを示します。

TypeScript の onClick MouseEvent インターフェイス

onClick または MouseEvent インターフェイスは、コードに機能を追加するために使用できる多くのプロパティを持つ豊富なインターフェイスです。

interface MouseEvent<T = Element, E = NativeMouseEvent> extends UIEvent<T,E> {
    altKey: boolean;
    button: number;
    buttons: number;
    clientX: number;
    clientY: number;
    ctrlKey: boolean;
    movementX: number;
    movementY: number;
    pageX: number;
    pageY: number;
    relatedTarget: EventTarget | null;
    screenX: number;
    screenY: number;
    shiftKey: boolean;
}

さまざまな属性が、さまざまなキー押下イベントまたはマウス クリック イベントに関連付けられた位置情報を参照します。 altKey は、特定のマウス イベントが発生したときに Alt キーが押されたかどうかを示します。

button は、クリック イベント中にどのマウス ボタンが押されたかを示します。メイン ボタンの場合は 0、補助ボタンの場合は 1 などです。button 属性の詳細については、こちら を参照してください。

clientX と clientY は、イベントが発生したアプリケーションのビューポート内の水平および垂直座標の浮動小数点値を参照します。 ctrlKey は、特定のマウス イベントが発生したときに alt キーが押されたかどうかを示します。

pageXとpageYは、マウスがクリックされた位置の水平座標と垂直座標の浮動小数点値を参照します。 これは、ドキュメント全体 (ドキュメントの表示されていない部分を含む) に対する相対値です。

screenX と screenY は、グローバル (スクリーン) 座標でのマウス ポインタの水平座標と垂直座標の浮動小数点値を参照します。 movementX および movementY 属性は、現在の mousemove イベントと以前の mousemove イベントの違いを参照します。

React で onClick MouseEvent を使用する

MouseEvent は、React の onClick イベントでトリガーできます。 次のコード セグメントは、これがどのように機能するかを示しています。

const ButtonComponent = () => {

    const handleButtonClick = (event : React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
        console.log(event.target);
        console.log(event.currentTarget);
    }

    return (
        <div>
            <button onClick={handleButtonClick}>Click me</button>
        </div>
    )
}

イベントの currentTarget プロパティは、イベント リスナーがアタッチされている要素へのアクセスを提供します。 イベントの target プロパティは、イベントをトリガーした要素を参照します。

MouseEvent は HTMLElement に一般化して、すべての HTML タグを受け入れるか、HTMLDivElement のようなその他の特別なタグを受け入れることができます。

const DivComponent = () => {

    const handleDivClick = (event : React.MouseEvent<HTMLDivElement, MouseEvent>) => {
        console.log(event.target);
        console.log(event.currentTarget);
    }

    return (
        <div>
            <div onClick={handleDivClick}>Hi I am a div</div>
        </div>
    )
}

TypeScript で MouseEvent インターフェイスを拡張する

interface CustomEventHandler extends MouseEvent<HTMLElement> {
    extraField : number
}

したがって、DOM 内のいくつかの要素をクリックしたときに特別なイベントを処理するために extraField 属性を使用できます。