User Manual

入力

ユーザは、Elementコンポーネントの useInputフィールドを有効にすることで、Elementコンポーネントとインタラクトできます:

入力の使用

また、動作させるためには pc.Application#elementInputpc.ElementInputのインスタンスを初期化しなければなりません。Editorを使用している場合は自動的に作成されます。Engineを使用している場合は、次のように、pc.Mousepc.TouchDeviceのような他の入力デバイスの前にインスタンスを作成してください:

var app = new pc.Application(canvas, {
    elementInput: new pc.ElementInput(canvas),
    mouse: new pc.Mouse(canvas),
    touch: !!('ontouchstart' in window) ? new pc.TouchDevice(canvas) : null,
    keyboard: new pc.Keyboard(window),
    gamepads: new pc.GamePads(),
    ...
});

イベント入力

Elementコンポーネントで入力を有効にすると、次のイベントが発生します:

mousedown

マウスカーソルがコンポーネント上にある際にマウスが押されると発生します。

mouseup

マウスカーソルがコンポーネント上にある際ににマウスが離されると発生します。

mouseenter

マウスカーソルがコンポーネントに入ると発生します。

mouseleave

マウスカーソルがコンポーネントを離れると発生します。

mousemove

マウスカーソルがコンポーネント上に移動すると発生します。

mousewheel

コンポーネント上でマウスホイールがスクロールされると発生します。

click

コンポーネント上でマウスを押して離したとき、またはコンポーネント上でタッチが開始および終了したときに発生します。

touchstart

コンポーネント上でタッチが開始されたときに発生します。

touchend

コンポーネント上でタッチが終了すると発生します。

touchmove

コンポーネントに触れ始めた後にタッチが移動したときに発生します。

touchcancel

コンポーネント上でタッチがキャンセルされたときに発生します。

イベント処理

入力イベントを処理するには、Elementコンポーネントでリッスンします。

this.entity.element.on('click', function (event) {
    console.log('The element ' + event.element.entity.name + ' was clicked.');
}, this);

イベントバブリング

Elementコンポーネントで入力イベントが発生すると、 event.stopPropagation()を呼び出さない限り、親要素にバブルアップします。 例えば:

this.entity.element.on('click', function (event) {
    // stop bubbling
    event.stopPropagation();

    console.log('The element ' + event.element.entity.name + ' was clicked.');
}, this);

stopPropagationを呼び出すと、イベントが pc.Mousepc.TouchDeviceのような他の入力デバイスによって処理されなくなります。たとえば、app.mouse.wasPressedを使ってマウス入力を処理している場合、mousedownイベントで stopPropagationを呼び出してapp.mouse.wasPressedがtrueを返さないようにします。 例えば:

initialize: function () {
    this.entity.element.on('mousedown', function (evt) {
        evt.stopPropagation();
    }, this);
},

update: function (dt) {
    if (this.app.mouse.wasPressed(pc.MOUSEBUTTON_LEFT)) {
        // do something when the left button was pressed.
        // this will not be called if the button was pressed on the Element
        // because we call stopPropagation
    }
}

Mouse and Touch event conflict on Google Chrome

Google Chrome simulates mouse events also on touch devices. By doing so it could cause some unexpected behavior. For example if you hide a button right after the click event, another UI element that lays behind it could also receive an unwanted click event.

To prevent this behavior you can call the preventDefault() method of the native event object on the pc.EVENT_TOUCHEND event:

Here is small script to include once in your scene:

var TouchFix = pc.createScript('touchFix');

// initialize code called once per entity
TouchFix.prototype.initialize = function() {
   // Only register touch events if the device supports touch
   var touch = this.app.touch;
   if (touch) {
       touch.on(pc.EVENT_TOUCHEND, function(event) {
           // This prevents that a mouse click event will be executed after a touch event.
           event.event.preventDefault();
       });
   }
};
This site is translated by the community. If you want to get involved visit this page