MouseArea events on a Listview Component in QtQuick2 - qml

Question

We are working on a touchscreen device and we are facing an issue with the following code:
import QtQuick 2.1
import QtQuick.Window 2.0
Window {
visible: true
id: box
width: 360
height: 360
ListView {
id: list
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
spacing: 0
model: 30
delegate: data
clip: true
focus: true
smooth: true
}
Component{
id: data
Item{
id: item
width: list.width
height: 30
clip: true; smooth: true; visible: true
property string cellColor: getCellColor(index)
Rectangle{
id: condData_item_line
width: parent.width
height: parent.height
color: cellColor
clip: true; smooth: true
Text{
text: index
anchors.centerIn: parent
}
MouseArea{
anchors.fill: parent
onClicked: {
console.log("click", index, mouse.x, mouse.y)
}
onPressed : {
console.log("press", index, mouse.x, mouse.y)
}
onReleased: {
console.log("release", index, mouse.x, mouse.y)
}
onCanceled: {
console.log("cancel")
}
}
}
}
}
function getCellColor(index){
var color;
if(index % 2 == 0){
color = "white";
}else{
color = "blue";
}
return color;
}
}
Whereas we defined handles for the clicked and released events they are never called. Is this normal? If yes, how should we code the event handling so that clicked and released events are fired on the Rectangle components?
Additional info: With this code, touching the first item (index:0), clicked and released events are fired properly. But touching the other items we only get canceled events.