VUE学习----父子元素点击事件冲突

背景

  在开发中，经常遇到父级元素带有点击事件，而其子级元素也有点击事件。且二者的具有不同的逻辑处理。在点击子级元素时，会触发父级元素的事件响应，带来不好的用户体验。

举例说明：

<template>
    <div @click="fatherClick" style="background-color: pink;">
      <div style="width: 100px; background: red; font-size: 0.32rem; margin: 10px 10px 10px 10px;">内容</div>
      <div @click="childClick" style="width: 200px; padding: 10px 10px; background-color: yellow; font-size: 0.4rem; margin: 10px 10px;">测试子元素</div>
    </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {}
  },
  methods: {
    fatherClick(event) {
      let el1 = event.currentTarget
      let el2 = event.target
      console.log('fatherClick=========')
      console.log(el1, 'currenrTarget from fatherClick')
      console.log(el2, 'target from fatherClick')
    },
    childClick(event) {
      let el1 = event.currentTarget
      let el2 = event.target
      console.log('childClick=========')
      console.log(el1, 'currenrTarget from childClick')
      console.log(el2, 'target from childClick')
    }
  }
}
</script>

页面效果如图所示。

屏幕截图 2021-01-17 194501.png

观察冲突现象

点击父元素区域和子元素区域，日志显示信息为：

父子层级元素点击冲突

根据日志显示，可看出，

在点击父级元素时，只触发父元素的点击事件，currentTarget和target都指向了父级元素对象
在点击子级元素时，先触发子元素的点击事件，后触发父元素的点击事件。currentTarget和target先都指向子级元素对象，然后currentTarget指向父级元素对象，taeget指向子级元素对象。

原因：

在JS中，

event.currentTarget获取到的是click事件绑定的DOM对象

event.target获取到的为当前所点击的DOM对象。

若绑定了一个父级元素后，点击子元素时，会触发父元素的点击事件。

若需要点击子元素时不触发父元素事件，有两种解决方案

1、在父元素中判断event.currentTarget == event.target是否为true

fatherClick(event) {
      let el1 = event.currentTarget
      let el2 = event.target
      if (el1 === el2) {
        console.log('-------选中了父元素------')
      }
    },

观察现象：

解决冲突方式（一）

2、在子元素中，绑定一个阻止冒泡的点击事件 @click.stop

<template>
    <div @click="fatherClick" style="background-color: pink;">
      <div style="width: 100px; background: red; font-size: 0.32rem; margin: 10px 10px 10px 10px;">内容</div>
      <div @click.stop="childClick" style="width: 200px; padding: 10px 10px; background-color: yellow; font-size: 0.4rem; margin: 10px 10px;">测试子元素</div>
    </div>
</template>

观察现象：

解决冲突方式（二）