クライアント側イベント

InputMan for ASP.NETの各コントロールでも、Internet Explorer 10以降、標準でサポートされているタッチに特化したクライアント側イベントを使用できます。

タッチ関連のクライアント側イベント

タッチ入力とペン入力がサポートされたInternet Explorer 10以降の環境では、ポインターの概念が導入されました。これに伴い、マウスイベントと同様にポインターイベントが発生します。また、ジェスチャと呼ばれるピンチやスワイプといったタッチ操作が行われたときには、ジェスチャイベントが発生します。詳細については

ポインターイベントとジェスチャイベントを参照してください。

InputMan for ASP.NETの各コントロールでも、ポインターイベントおよびジェスチャイベントが発生し、ほかのクライアント側イベントと同様の方法でイベントハンドラを追加することができます。イベントハンドラの追加方法については「イベントの追加」を参照してください。

InputMan for ASP.NETでサポートするポインターおよびジェスチャイベントの一覧は「標準クライアント側イベント－タッチ関連イベント」を参照してください。

また、これらのクライアント側イベントは、サーバー側のStandardClientEventsクラスにも追加され、プロパティウィンドウからイベントハンドラを作成したり、サーバー側でクライアント側イベントの追加を実装することもできます。

Internet Explorer 11以降では、ポインターイベントがW3C仕様に更新されました。これによりMSベンダープレフィックスが削除されています。たとえば、ポインターを置いたときに発生するonmspointerdownイベントは、onpointerdownと変更されています。
しかし、InputMan for ASP.NETでは、MSベンダープレフィックスが使われたままのイベント名でInternet Explorer 11以降でも動作します。

詳細についてはポインターイベントの更新を参照してください。

ポインターイベントの実装

ポインターイベントは、通常の標準クライアント側イベントと同様の方法で各コントロールにイベントハンドラを追加することができます。

以下に、日付時刻コントロールのonmspointerdownクライアント側イベントが追加される例を紹介します。

次のサンプルコードは、ASPXファイルにHTMLタグのインライン属性として追加される例です。これはプロパティウィンドウからイベントハンドラを追加すると自動的に追加されるコードです。

HTMLタグのインライン属性

<ClientEvents>
    <StandardClientEvents onmspointerdown="GcDateTime1_onmspointerdown"></StandardClientEvents>
</ClientEvents>

次のサンプルコードは、サーバー側で実装する例です。

Visual Basic
C#

GcDateTime1.ClientEvents.StandardClientEvents.onmspointerdown = "GcDateTime1_onmspointerdown"

GcDateTime1.ClientEvents.StandardClientEvents.onmspointerdown = "GcDateTime1_onmspointerdown";

次のサンプルコードは、onmspointerdownクライアント側イベントの実装例です。日付時刻コントロールにポインターが置かれたとき、入力デバイス（マウス、タッチ、ペン）により背景色を変更します。

JavaScript

function GcDateTime1_onmspointerdown(evt) {
    // IE11以降
    if(navigator.pointerEnabled)
    {
        switch (evt.pointerType) {
            case "touch":
                // 指が置かれたとき、背景色を黄色にします。 
                FindIMControl(evt.currentTarget.id).SetBackColor("yellow");
                break;
            case "pen":
                // ペンが置かれたとき、背景色を緑にします。 
                FindIMControl(evt.currentTarget.id).SetBackColor("green");
                break;
            case "mouse":
                // マウスが置かれたとき、背景色を水色にします。 
                FindIMControl(evt.currentTarget.id).SetBackColor("aliceblue");
                break;
        }
    }
    // IE10
    else if(navigator.msPointerEnabled)
    {
        switch (evt.pointerType) {
            case evt.MSPOINTER_TYPE_TOUCH:
                // 指が置かれたとき、背景色を黄色にします。
                FindIMControl("GcDateTime1").SetBackColor("yellow");
                break;
            case evt.MSPOINTER_TYPE_PEN:
                // ペンが置かれたとき、背景色を緑にします。
                FindIMControl("GcDateTime1").SetBackColor("green");
                break;
            case evt.MSPOINTER_TYPE_MOUSE:
                // マウスが置かれたとき、背景色を青にします。
                FindIMControl("GcDateTime1").SetBackColor("blue");
                break;
        }
    }
}

ジェスチャイベントの実装

ジェスチャイベントをハンドルするには、「イベントの追加」で紹介している方法でイベントハンドラを追加する以外に、以下の実装を行う必要があります。これは標準コントロールと同様の処理となります。詳細についてはMSDNを参照してください。

ジェスチャを認識するオブジェクトであるMSGestureオブジェクトのインスタンスを生成します。
ジェスチャにターゲット要素（コントロール）を設定します。
ジェスチャ認識の際に処理するべきポインターをジェスチャオブジェクトに設定します。

以下に、テキストコントロールにonmsgesturetapクライアント側イベントをハンドルする方法を紹介します。

HTML

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body  
{
    /* タッチの既定操作を無効にします */
    /* IE10用 */
    -ms-touch-action: none;
    /* IE11用 */
    touch-action : none;
}
</style>
<script type="text/javascript">
    // ジェスチャオブジェクトの宣言です。
    var myGesture;

    function onLoad() {
        // ジェスチャオブジェクトのインスタンスを生成します。
        myGesture = new MSGesture();
        // ジェスチャにターゲット要素を設定します。
        myGesture.target = document.getElementById("GcTextBox1");
    }

    function GcTextBox1_onmspointerdown(evt) {
        // ジェスチャ認識の際に処理するべきポインターを設定します。
        myGesture.addPointer(evt.pointerId);
    }

    function GcTextBox1_onmegesturetap(evt) {
        // コントロールがタップされたときの処理を実装します。
        FindIMControl("GcTextBox1").SetText("タップされました。");
    }
</script>
<body onload="onLoad()">
    <form id="form1" runat="server">
        <im_edit:GcTextBox ID="GcTextBox1" runat="server" HasLoadFromXml="True">
            <clientevents>
                <StandardClientEvents 
                    onmspointerdown="GcTextBox1_onmspointerdown" 
                    onmsgesturetap="GcTextBox1_ongesturetap">
                </StandardClientEvents>
            </clientevents>
        </im_edit:GcTextBox>
    </form>
</body>
</html>

ジェスチャにターゲット要素を設定する場合に限り、InputMan for ASP.NETのコントロールに対してdocument.getElementByIdメソッドを実行することが可能です。通常、コントロールのクライアント側オブジェクトを取得するにはFindIMControlメソッドを使用します。

参照