Question: I am using a firebase-collection element to fetch an array of objects from my Firebase repository in a Polymer application. The data fetches with no problem. Now that I have the objects, how do I update a child property on one of them?

```
<firebase-collection
  id="myfb"
  location="https://dinosaur-facts.firebaseio.com/dinosaurs"
  data="{{dinosaurs}}">
</firebase-collection>

<template is="dom-repeat" items="[[dinosaurs]]" as="dinosaur">
  <h4>[[dinosaur.__firebaseKey__]]</h4>
  Height: <span>[[dinosaur.height]]</span>
  <iron-icon on-click="updateDino"></iron-icon>
</template>

```

... polymer boilerplate omitted for brevity ...

```
updateDino: function(e) {
   var key = e.model.dinosaur.__firebaseKey__;

   // now what? 
   // tried this: e.model.dinosaur.height = 3.1415 
   // but firebase doesn't save the change. 

   // also tried various things with this.$.myfb.add but 
   // it always creates a new element

   // where's the set() method on firebase-collection?
   // something like this.$.myfb.set(key, updatedObj) would be handy.
}

```

Answer: 
I think you are getting the pointer of the mouse styles confused with actual events firing.

All it seems you are doing is hiding the mouse pointer. If you want to disable click or mouse events you must do so by attaching an event listener. Listen for the event and add

```
document.on("mouseleave","#elementid",function(e){
    e.preventDefault();
}

```

if you are using jQuery
You could use the addEventListener and removeEventListener functions like this:

```
let div = document.querySelector('div');

div.onclick = function() {
    console.log('click!');
    this.classList.add('nopointer');
    div.removeEventListener("mouseleave", mymouseout);
};

function mymouseout() {
  console.log('mouseout!');
}

div.addEventListener("mouseleave", mymouseout);

```