<template>
  <list class="list">
    <cell class="cell" @click="clickCell">
      <xlink style="width: 400px;height: 400px;background-color: yellow;" target="_blank" :href = "url">
        <div class="ct"  @click="click">
          <text>CLICK ME</text>
        </div>
      </xlink>
    </cell>
  </list>
</template>

<style scoped>
.list {
  height: 2000px;
}
.cell {
  height: 400px;
  background-color: blue;
}
.txt {
  font-size: 64px;
  height: 84px;
  line-height: 84px;
  padding: 10px;
}
.ct {
  width: 200px;
  height: 200px;
  background-color: #fff;
}
</style>

<script>
export default {
  data () {
    return {
      // url: '//m.taobao.com'
      url: '#'
    }
  },
  components: {
    xlink: {
      props: {
        href: String
      },
      render (createElement) {
        return createElement('a', {
          ref: 'link',
          attrs: {
            'component-name': 'link',
            'href': this.href
          }
        }, this.$slots.default)
      }
    }
  },
  methods: {
    click (evt) {
      evt.preventDefault()
      // var d = Date.now()
      // while (true) {
      //   var now = Date.now()
      //   if (now - d > 2000) { break }
      // }
      // throw new Error('test')
      console.log('click on inner')
    },
    clickCell (evt) {
      console.log('click on cell')
    }
  }
}
</script>