用户无对应权限时如何禁用非button元素绑定的onclick点击事件？

方案1：直接控制删除链接的点击事件与展示状态（体验更好） #

步骤1：给删除a标签新增唯一标识类（仅需修改1行HTML） #

给原有删除结构的a标签加delLink类，方便jQuery定位元素，修改后代码如下：

<span class="text-center"><a onclick ="deleteMsg('${emsg_id}')" class="delLink"><span class="text-danger" data-toggle="tooltip" data-placement="top" title="Delete"><em class="icon ni ni-trash"></em></span></a></span>

步骤2：新增删除权限判断逻辑 #

在原有jQuery权限判断代码后新增如下逻辑：

if(e.allowDel) {
  // 有权限：恢复点击事件、还原样式与提示文案
  $(".delLink").attr("onclick", function(i, origAttr) {
    return origAttr || $(this).data("origOnclick");
  }).css("opacity", 1).children("span").attr("title", "Delete");
  // 解绑之前绑定的阻止点击事件
  $(".delLink").off("click.preventDel");
} else {
  // 无权限：移除点击事件、置灰、修改提示、阻止所有点击行为
  $(".delLink").each(function() {
    // 先缓存原始的onclick属性，后续恢复权限时可以复用
    $(this).data("origOnclick", $(this).attr("onclick"));
  }).removeAttr("onclick")
  .css("opacity", 0.5) // 置灰提示不可点击
  .children("span").attr("title", "无删除权限")
  .end()
  // 绑定阻止点击事件，避免其他逻辑触发删除操作
  .on("click.preventDel", function(e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
  });
}

方案2：修改删除执行函数增加前置校验（无需修改原有HTML结构） #

如果不想改动现有HTML代码，直接给删除函数加权限校验即可：

// 先定义全局变量存储权限数据，接口返回权限后赋值
let userAuth = {}
// 接口请求成功拿到e后赋值
userAuth = e

function deleteMsg(msgId) {
  // 增加权限前置校验
  if(!userAuth.allowDel) {
    alert("您没有删除操作权限");
    return false;
  }
  // 原有删除逻辑保留在下方
  // ...
}

原有逻辑优化建议 #

你当前的按钮权限判断代码可以大幅简化，不需要写三元表达式，直接把布尔值传给prop方法即可，逻辑完全一致：

$("button.viewBtn").prop("disabled", !e.allowView);
$("button.addBtn").prop("disabled", !e.allowAdd);
$("button.editBtn").prop("disabled", !e.allowEdit);
$("button.deleteBtn").prop("disabled", !e.allowDel);

内容的提问来源于stack exchange，提问作者duatree