DisplayObject.mouseEnabledプロパティは、DisplayObjectインスタンスがマウスイベントを起こさないように定めることができます。けれども、直後のマウスイベントが起こってしまうこともあります。

The DisplayObject.mouseEnabled property can prevent an DisplayObject from dispatching mouse events. But conjunct mouse event might fire in some cases.

01 DisplayObject.mouseEnabledプロパティ
  - DisplayObject.mouseEnabled property

DisplayObject.mouseEnabledプロパティは、マウス操作のイベントがそのオブジェクトで扱われるかどうかを示します。デフォルト値はtrueで、オブジェクトのリスナーにマウスイベントを送ります。プロパティがfalseに定められると、オブジェクトをクリックしても、マウスイベントは起こりません。ただし、DisplayObject.mousedownイベントのリスナー関数でプロパティをfalseに定めても、すぐ後に続くマウスイベントは送られてしまいます。

The DisplayObject.mouseEnabled property indicates whether to include this object when running mouse interactions. Its default value is true and the object dispatch the mouse events to its listeners. Setting this property to false will cause events on the object to not fire when it is clicked. However, even if the property is set to false in the DisplayObject.mousedown event's listener, the conjunct mouse events will fire.

02 マウスイベントを無効にしたオブジェクトからDisplayObject.mouseoutイベントが送られる
  - Disabled object dispatches DisplayObject.mouseout event

たとえば、StageオブジェクトにShapeインスタンスをひとつ置きます。そして、そのインスタンス(instance)にDisplayObject.mousedownとDisplayObject.mouseoutのふたつのイベントリスナー(mouseDownHandler()とmouseOutHandler())を加えます。なお、DisplayObject.mouseoutイベントを起こすには、Stage.enableMouseOver()メソッドが呼出されていなければなりません。

Suppose creating a shape instance on the Stage. Then add the two event listeners (mouseDownHandler() and mouseOutHandler()) of the DisplayObject.mousedown and DisplayObject.mouseout events to the object (instance) as follows. Note that Stage.enableMouseOver() method should be called to fire the DisplayObject.mouseout event.

stage.enableMouseOver(); instance.addEventListener("mousedown", mouseDownHandler); instance.addEventListener("mouseout", mouseOutHandler);

ふたつのリスナー関数は、以下のように定めます。インスタンスの上でマウスボタンを押すと、そのアルファが0.5になります。そして、マウスポインタをインスタンスの外に出せば、アルファは1に戻ります。

Two listener functions are defined as follows. Pressing the mouse button on the instance changes its alpha into 0.5. When the mouse pointer moves outside the instance, its alpha turns back 1.0.

function mouseDownHandler(eventObject) {   var instance = eventObject.target;   instance.alpha = 0.5;   stage.update(); } function mouseOutHandler(eventObject) {   var instance = eventObject.target;   instance.alpha = 1;   stage.update(); }

ここで、DisplayObject.mousedownのリスナー関数にステートメントをひとつ加え、DisplayObject.mouseEnabledプロパティをfalseに定めます。ところが、その直後1度だけDisplayObject.mouseoutイベントが起こってしまいます。その後は、インスタンスはマウスイベントを起こさなくなります。

Now, insert one statement, which sets the DisplayObject.mouseEnabled property to false, into the listener function of the DisplayObject.mousedown event. However, the DisplayObject.mouseout event still fires once. Then the mouse events to the instance will be disabled.

function mouseDownHandler(eventObject) {   var instance = eventObject.target;   instance.alpha = 0.5;   instance.mouseEnabled = false;   stage.update(); }

03 サンプルコードと対処法
  - Example code and workaround

サンプルコードをjsdo.itに掲げました。まず、青い矩形のShapeオブジェクト上でマウスボタンを押すと、インスタンスのアルファが0.5に下がります。つぎに、マウスポインタを少しでも動かせば、アルファはもとに戻ります。これは、DisplayObject.mouseoutイベントが起こったということです。ポインタをインスタンスの外に出す必要はありません。

The example code is uploaded to jsdo.it. Firstly, press the mouse button on the blue rectangle Shape, and its alpha will decrease to 0.5. Secondly, slightly moving the mouse pointer will make its alpha back normal state. This means that the DisplayObject.mouseout event occurs. The pointer does not need to move to outside the object. After that, mouse interaction to the object will be disabled.

この問題を避けるには、DisplayObject.mouseEnabledプロパティをfalseに定めるだけでなく、DisplayObject.mouseoutイベントのリスナーを除かなければなりません。

One workaround is to remove the listener of the DisplayObject.mouseout event at the same time to set the DisplayObject.mouseEnabled property to false.

function mouseDownHandler(eventObject) {   var instance = eventObject.target;   instance.alpha = 0.5;   instance.mouseEnabled = false;   instance.removeEventListener("mouseout", mouseOutHandler);   stage.update(); }

04 CreateJS Supportからの回答
  - Reply from CreateJS Support

この問題について、GreateJS Supportで開発者のGrant Skinner氏から説明がありました。詳しくは「EaselJSのDisplayObject.mouseEnabledプロパティで直後のDisplayObject.mouseoutイベントが止められない」をお読みください。

Grant Skinner replied about this issue in the CreateJS Support. As for the details, see "Setting DisplayObject.mouseEnabled to false does not prevent DisplayObject.mousedown event from firing".

作成者: 野中文雄
更新日: 2013年10月2日 04「CreateJS Supportからの回答」を追加。
作成日: 2013年9月8日