【前端vue】 复制 选中 文本如何不触发点击事件

在某些特定的业务场景,既需要通过点击文本弹出详情,又要可以选中文本进行复制,但是单纯添加点击事件,在选中文本时也会触发点击事件

 如下例 在table中 点击流水号 弹出订单详情 ,但是还要可以复制流水号

<el-table-column
    prop="serialNumber"
    show-overflow-tooltip
    label="流水号"
    min-width="170">
  <template slot-scope="scope">
    <el-link type="primary"  @click="orderInfo(scope.row)">{{scope.row.serialNumber}}</el-link>
  </template>
</el-table-column>

解决方案:

只需要在点击事件中判断当前是否有选中文本, 如果未选中文本就执行弹出弹窗,选中则不做任何操作

    orderInfo(row){
      if (window.getSelection().toString() === '') {
        this.orderInfo = row;
        this.dialogOrderInfo = true;
      }
    },