阻止冒泡element按钮点击操作阻止@row-click

描述：<el-table>某一行中同时存在两个方法，使用@row-click点击某一行时，会执行一个方法，同时这一行有编辑和删除按钮。

问题：在点击按钮时，@row-click事件也被触发了，不想触发 row-click 事件只触发自身的事件。

解决办法：写按钮的 @click 事件时添加 .stop

<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"  stripe style="width: 100%" @row-click="click_row">
          <el-table-column type="selection"width="55"></el-table-column>
          <el-table-column prop="name" label="电梯名称" width="120"></el-table-column>
          <el-table-column prop="type" label="电梯型号" width="120"></el-table-column>
          <el-table-column prop="address" label="电梯使用位置" show-overflow-tooltip></el-table-column>
          <el-table-column prop="unit" label="维保单位" show-overflow-tooltip></el-table-column> 
                <el-table-column label="操作" width="150">
                  <template slot-scope="scope">
                    <el-button type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>
                    <el-button type="text" size="small"  @click.stop="delete"><i class="el-icon-delete"></i>删除</el-button>
                  </template>
          </el-table-column>
</el-table>

关于冒泡：

<div class='one' onclick="alert('最外层')">
        <div class="two" onclick="alert('中间层')">
            <a href="https://www.jianshu.com/p/02b12c600c7b" class="three" onclick="alert('最内层')">点我</a>
        </div>
</div>

执行顺序为依次弹出最内层》》中间层》》最外层》》跳转本身href的网页

如何来阻止?

1.event.stopPropagation();

 <script type="text/javascript">
        $(function() {
            $(".three").click(function(event) {
                event.stopPropagation();
            });
        });
<script>

点击“点我”，会弹出：最内层，然后链接到网页

2.return false;

如果头部加入的是以下代码

<script type="text/javascript">
$(function() {
　　$("#three").click(function(event) {
　　　　return false;
　　});
});
<script>

点击“点我”，会弹出：最内层，但不会执行链接到页面

3.event.preventDefault();

$(function() {
    $(".three").click(function(event) {
        　event.preventDefault(); 
    });
});

点击“点我”。会依次弹出最内层---->中间层---->最外层，但最后却没有跳转到页面

阻止冒泡element按钮点击操作阻止@row-click

推荐阅读更多精彩内容