js中icon怎么禁用点击事件

你可以使用CSS来禁用图标的点击事件，具体方法如下：

1. 首先，在HTML中为图标添加一个class，例如：

<i class="icon-disabled"></i>

2. 接下来，在CSS中为这个class添加样式，禁用其点击事件：

.icon-disabled {
  pointer-events: none;
}

这样，这个图标就会被禁用点击事件了。注意，这种方法并不是真正意义上的禁用，而是将点击事件转移到了其下方的元素上。如果你需要真正意义上的禁用点击事件，可以使用JavaScript来实现。

相关问题

通过设置 disabled 属性来禁用 ligerUI 的 combobox，在点击combobox最右侧的图标还是可以下拉。如何实现点击combobox最右侧的图标，也不能下拉选择

如果要实现点击 `combobox` 最右侧的图标也不能下拉选择，可以通过以下两种方式实现：

1. 通过 CSS 样式来隐藏 `combobox` 右侧图标

可以通过设置 `ligerComboBox` 的 `onRendered` 属性来在 `combobox` 渲染后执行一段代码，将 `combobox` 右侧图标隐藏：

$('#comboboxId').ligerComboBox({
    onRendered: function() {
        // 获取 combobox 右侧图标所在的 DOM 元素
        var $icon = $(this.element).next('.l-trigger');
        // 隐藏 combobox 右侧图标
        $icon.hide();
    }
});

这样，不仅 `combobox` 下拉选择被禁用了，连最右侧的图标也被隐藏了，用户无法进行选择。

2. 通过阻止 combobox 的点击事件来禁止选择

还可以通过阻止 `combobox` 的点击事件来禁止选择，即在点击 `combobox` 或其右侧图标时，阻止 `combobox` 的下拉选择事件，代码如下：

$('#comboboxId').ligerComboBox({
    onRendered: function() {
        // 获取 combobox 右侧图标所在的 DOM 元素
        var $icon = $(this.element).next('.l-trigger');
        // 给 combobox 和其右侧图标绑定点击事件，阻止冒泡
        $(this.element).add($icon).click(function(e) {
            e.stopPropagation();
        });
    }
});

这样，用户点击 `combobox` 或其右侧图标时，`combobox` 不会下拉选择，也无法进行选择。

vue+element实现列表行点击编辑按钮打开编辑对话框，在编辑对话框点击提交信息后立即关闭编辑对话框且列表行编辑按钮15内禁用

可以通过以下步骤实现：

1. 在列表行中添加一个编辑按钮，并绑定点击事件处理函数。

<el-table-column>
  <template slot-scope="scope">
    <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
  </template>
</el-table-column>

2. 在`handleEdit`函数中，设置一个标志变量`isEditing`为`true`，并记录当前编辑的行数据。然后打开一个`el-dialog`对话框，用于编辑数据。

data() {
  return {
    isEditing: false,
    editingRow: null
  }
},
methods: {
  handleEdit(row) {
    this.isEditing = true
    this.editingRow = row
  }
}

<el-dialog v-model="isEditing">
  <el-form>
    <!-- 编辑表单内容 -->
  </el-form>
  <div slot="footer">
    <el-button type="primary" @click="handleSubmit">提交</el-button>
    <el-button @click="handleCancel">取消</el-button>
  </div>
</el-dialog>

3. 在`handleSubmit`函数中，先禁用编辑按钮，并在15秒后重新启用。然后关闭对话框，清空标志变量和编辑行数据。

handleSubmit() {
  // 禁用编辑按钮
  this.isEditing = false
  this.editingRow = null
  this.disableEditButton()

  // 提交表单数据
  // ...

  // 关闭对话框
  this.isEditing = false
},
disableEditButton() {
  // 禁用当前编辑行的编辑按钮
  const row = this.editingRow
  const elButton = this.$refs.table.$el.querySelector(`.el-table__row[data-row-key="${row.id}"] .el-button`)
  if (elButton) {
    elButton.disabled = true
    setTimeout(() => {
      elButton.disabled = false
    }, 15000)
  }
}