Вложенный указатель мыши.

Question

У меня проблемы с вложенными MouseArea с. Когда я нажимаю красный Rectangle, он вызывает событие exited наверху Rectangle (для меня как минимум). Это намеренное поведение? Если да, есть ли обходной путь?

Редактировать

Разъяснение
То, что я хочу, чтобы иметь возможность держать парить на верхней Rectangle при щелчке ребенка Rectangle (верхняя Rectangle должна остаться blue). Это полезно, если я хочу скрыть и отобразить кнопки и т. Д. При наведении курсора, что является обычной практикой в ​​веб-интерфейсах (HTML/CSS). Выполнение этого теперь вызывает странные эффекты, так как нажатие кнопок, обнаруженных сигналом entered, исчезнет при нажатии на них.

Редактировать

Я сделал демонстрацию Javascript с разыскиваемым поведением: https://jsfiddle.net/uo4vousu/ Даже если вы нажмете на красный прямоугольник родитель остается синим, который является то, что я хочу. В примере QML родитель становится зеленым. Я обновил QML-код, чтобы обработать jsfiddle.

Редактировать

Это может быть линукс только проблема.

Вот пример:

Rectangle { 
    id: top 
    width: 100 
    height: 32 
    anchors.centerIn: parent 
    color: "green" 

    MouseArea { 
     anchors.fill: parent 
     hoverEnabled: true 
     onExited: top.color = "green" 
     onEntered: top.color = "blue" 

     Rectangle { 
      id: child 
      width: 16 
      height: 16 
      anchors.centerIn: parent 
      color: "red" 
      MouseArea { 
       anchors.fill: parent 
       onPressed: child.color="gray" 
       onReleased: child.color="red" 
      } 
     } 
    } 
} 

Answer 1

Я обнаружил, что этот вопрос присутствует только при использовании диспетчера окон Awesome. Я не знаю, что вызывает это, но я все равно считаю это решением.

Answer 2

Самый простой способ:

Rectangle { 
    id: top 
    width: 100 
    height: 32 
    anchors.centerIn: parent 
    color: "green" 
    MouseArea { 
     anchors.fill: parent 
     hoverEnabled: true 
     onExited: top.color = "green" 
     onEntered: top.color = "blue" 
     Rectangle { 
      width: 16 
      height: 16 
      anchors.centerIn: parent 
      color: "red" 
      MouseArea { 
       anchors.fill: parent 
       hoverEnabled: true 
       onExited: top.color = "blue" 
       onEntered: top.color = "green" 
       onClicked: console.log("Clicked") 
      } 
     } 
    } 
} 

вы можете использовать некоторые математические,

Rectangle { 
    id: top 
    width: 100 
    height: 32 
    anchors.centerIn: parent 
    signal sgnEnteredZone() 
    color: "green" 
    onSgnEnteredZone: { 
     top.color = "blue" 
    } 
    MouseArea { 
     anchors.fill: parent 
     hoverEnabled: true 
     onMouseXChanged:{ 

      if((mouseX <inRect.x ||mouseX>inRect.width + inRect.x) 
        && (mouseY <inRect.y ||mouseY>inRect.height + inRect.y) 
        ) 
       sgnEnteredZone() 
      else 
       top.color = "green" 

     } 
     onMouseYChanged:{ 
      if((mouseX <inRect.x ||mouseX>inRect.width + inRect.x) 
        && (mouseY <inRect.y ||mouseY>inRect.height + inRect.y) 
        ) 
       sgnEnteredZone() 
      else 
       top.color = "green" 
     } 


     Rectangle { 
      id:inRect 
      width: 16 
      height: 16 
      anchors.centerIn: parent 
      color: "red" 
      MouseArea { 
       anchors.fill: parent 
       onClicked: console.log("Clicked") 
      } 
     } 
    } 
}