event不会事件冒泡,值作用于此节点对象,不会传递到父节点或子节点
标准属性:
属性 | 描述 |
---|---|
bubbles | 返回布尔值,指示事件是否是起泡事件类型。 |
cancelable | 返回布尔值,指示事件是否可拥可取消的默认动作。 |
currentTarget | 返回其事件监听器触发该事件的元素。 |
eventPhase | 返回事件传播的当前阶段。 |
target | 返回触发此事件的元素(事件的目标节点)。 |
timeStamp | 返回事件生成的日期和时间。 |
type | 返回当前 Event 对象表示的事件的名称。 |
使用方法:
e.target
例如:获取节点的内容e.target.innerHTML 或者 e.targert.innerText
handleLetterClick(e) {
this.$emit('change', e.target.innerText)
},
示例组件
<template>
<ul class="list">
<li
class="item"
v-for="item of letters"
:key="item"
:ref="item"
@touchstart="handleTouchStart"
@touchmove="handleTouchMove"
@touchend="handleTouchEnd"
@click="handleLetterClick"
>{{item}}</li>
</ul>
</template>
<script>
export default {
name: "CityAlphabet",
props: {
cities: Object
},
computed: {
letters() {
const letters = []
for (let i in this.cities) {
letters.push(i)
}
return letters
}
},
data() {
return {
touchStatus: false
}
},
methods: {
handleLetterClick(e) {
this.$emit('change', e.target.innerHTML)
},
// handleTouch...系列方法是 手指在手机屏幕的右侧字母滑动时,左侧城市列表跟着变化,可以不增加此功能,只有点击字母表城市列表变化也很合理
handleTouchStart() {
this.touchStatus = true
},
handleTouchMove(e) {
if (this.touchStatus) {
// A字母到input框的距离
const startY = this.$refs['A'][0].offsetTop
//手指位置到input的距离 = 手指位置距离顶部位置 - header
const touchY = e.touches[0].clientY - 79
// 当前手指的字母位置
const index = Math.floor((touchY - startY) / 20)
if (index >= 0 && index < this.letters.length) {
this.$emit('change', this.letters[index])
}
}
},
handleTouchEnd() {
this.touchStatus = false
}
}
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibless.styl'
.list
display flex
flex-direction column
justify-content center
position absolute
right 0
top 1.58rem
bottom 0
width .4rem
.item
line-height .4rem
text-align center
color $bgColor
</style>