如何用JavaScript禁用页面所有链接，仅保留指定class的可点击？

你的原脚本有几个小问题需要修正，同时加上类判断的逻辑就行：

1. 首先e.target.tag是错误写法，应该用e.target.tagName，而且标签名是大写的A
2. 把右键菜单的监听放在点击事件里会重复绑定，得单独提出来
3. 核心逻辑：判断点击的是不是<a>标签，并且不包含clickable类时，才阻止默认行为

修改后的完整代码：

// 禁用非clickable链接的右键菜单
document.addEventListener('contextmenu', function(e) {
  if (e.target.tagName === 'A' && !e.target.classList.contains('clickable')) {
    e.preventDefault();
    // 要是需要提示文本，先确保页面上有el_down这个元素，比如<div id="el_down"></div>
    // el_down.innerHTML = "右键已禁用";
  }
});

// 阻止非clickable链接的点击跳转
document.addEventListener('click', function(e) {
  if (e.target.tagName === 'A' && !e.target.classList.contains('clickable')) {
    e.preventDefault();
  }
});

额外提示： #

• classList.contains('clickable') 是检查元素类名的标准方法，兼容性没问题，适合WordPress的各种环境
• 要是首页有动态加载的链接（比如AJAX加载的内容），这种绑定在document上的事件委托写法依然能生效
• 如果你要显示右键禁用的提示，记得提前在页面里定义好el_down元素，不然会报错

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