vue 中click.stop的用法

click.stop 阻止点击事件继续传播

场景：

    在table中使用，点击当前行，当前行被勾选，但是点击当前行中按钮或点击事件时，使用此方法，则在触发当前点击事件后，阻止行的选中事件

 使用：

html

                <el-table ref="tableRef" :data="tableData" :row-key="row => { return row.id}" @selection-change="handleSelectionChange">
                    <el-table-column
                        width="50"
                        align="center"
                        type="selection">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button 
                                v-hasFSS="'rkcjgl-table-caoZuoJiLu'"
                                icon="el-icon-stopwatch"
                                type="text" 
                                style="padding:0;" 
                                @click.stop="openCzjl(scope.row)"
                            >操作记录</el-button>
                        </template>
                    </el-table-column>
                </el-table>

页面效果：

 

参考地址：

vue @click.native和@click.stop和@click.self_前端技术的学习整理-CSDN博客_@click.stop参考一：vue @click.native 原生点击事件：1，给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用.native修饰符）2，等同于在自组件中： 子组件内部处理click事件然后向外发送click事件：$emit("click".fn)参考二：在事件处理器中经常需要调用event.preventDefault()...https://blog.csdn.net/weixin_41646716/article/details/90069562