阻止div的点击事件冒泡

情景：两个div是嵌套关系，大的div包住小的div

我的想法💡：点击内层的div我要执行自己内层div的change事件，但是不要触发外层div的点击事件

简单百度了下，发现是由于事件冒泡原因导致的

解决办法：一行代码搞定 onClick="event.cancelBubble = true"

代码复现：

<h2 class="title">
            {{ item.title }}
            <el-switch
              v-model="dataOperation"
              active-text="隐私"
              inactive-text="公开"
              @change="hiddenOrPublic(dataOperation)"
              //就是下面这行
              onClick="event.cancelBubble = true"
            >
            </el-switch>
          </h2>

以上，完美解决！