Flipable issue with onEntered and onExited in QML Qt5

Question

I tried to change the example given here ( http://qt-project.org/doc/qt-4.8/qml-flipable.html ) to obtain the same effect. It happens that when I enter with the mouse in front, the signals onEntered and onExited are captured several times: Ex: Passing the mouse over, appears on the console:

Entered Exited Entered

If step very quickly the mouse over, the flip is performed, but remains in the second state even if the mouse is no longer in that area. Help?

Flipable {
         id: flipable
         width: 240
         height: 240

         property bool flipped: false

         front: Rectangle { 
            color: "red"; 
            anchors.centerIn: parent 

            MouseArea {
               anchors.fill: parent
               onEntered: {
                  console.log("Entered");
                  flipable.flipped = !flipable.flipped
               }
            }
         }

         back: Rectangle { 
            source: "blue"; 
            anchors.centerIn: parent 

               MouseArea {
                  anchors.fill: parent
                  onExited: {
                     console.log("Exited");
                     flipable.flipped = !flipable.flipped
                  }
         }

         transform: Rotation {
             id: rotation
             origin.x: flipable.width/2
             origin.y: flipable.height/2
             axis.x: 0; axis.y: 1; axis.z: 0
             angle: 0
         }

         states: State {
             name: "back"
             PropertyChanges { target: rotation; angle: 180 }
             when: flipable.flipped
         }

         transitions: Transition {
             NumberAnimation { target: rotation; property: "angle"; duration: 1000 }
         }
     }

Answer 1

First I must blame You that your example is not working.

Ok, so do not put MouseArea inside front and back as their width is dynamically changed and borders are touching your mouse generating entered and exited signals. You must set MouseArea as parent or sibling. Then you can use entered and exited signals or containsMouse property.

import QtQuick 2.0

MouseArea
{
    id: mouseArea
    width: 240
    height: 240

    hoverEnabled: true
    onEntered:
    {
        console.log("Entered");
        flipable.flipped = !flipable.flipped
    }
    onExited:
    {
        console.log("Exited");
        flipable.flipped = !flipable.flipped
    }

    Flipable
    {
        id: flipable
        width: 240
        height: 240

        property bool flipped: false
        //property bool flipped: mouseArea.containsMouse // uncoment if onEntered and onExited is commented

        front: Rectangle 
        { 
            color: "red"; 
            anchors.fill: parent 
             }

        back: Rectangle
        { 
            color: "blue"; 
            anchors.fill: parent 
        }

        transform: Rotation
        {
            id: rotation
            origin.x: flipable.width/2
            origin.y: flipable.height/2
            axis.x: 0; axis.y: 1; axis.z: 0
            angle: 0
        }

        states: State
        {
            name: "back"
            PropertyChanges { target: rotation; angle: 180 }
            when: flipable.flipped
        }

        transitions: Transition
        {
            NumberAnimation { target: rotation; property: "angle"; duration: 1000 }
        }
    }
}