入力
ユーザは、Elementコンポーネントの useInput
フィールドを有効にすることで、Elementコンポーネントとインタラクトできます:
また、動作させるためには
pc.Application#elementInput
にpc.ElementInput
のインスタンスを初期化しなければなりません。Editorを使用している場合は自動的に作成されます。Engineを使用している場合は、次のように、pc.Mouse
やpc.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.Mouse
や
pc.TouchDevice
のような他の入力デバイスによって処理されなくなります。たとえば、app.mouse.wasPressed
を使ってマウス入力を処理している場合、mousedown
イベントで
stopPropagation
を呼び出してapp.mouse.wasPressed
がtrueを返さないようにします。 例えば:
var InputScript = pc.createScript('inputScript');
InputScript.prototype.initialize = function () {
this.entity.element.on('mousedown', function (evt) {
evt.stopPropagation();
}, this);
},
InputScript.prototype.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();
});
}
};