CSS/JS实现禁用点击事件同时保留浏览器图片右键菜单

纯CSS方案结论 #

无可用纯CSS实现方案。
你最初尝试的pointer-events: none属性会直接禁用元素上所有指针交互，包括左键点击、右键唤起原生菜单、图片拖拽等全部浏览器默认行为，目前没有CSS属性支持仅屏蔽JS绑定的自定义事件、同时保留原生交互。

JS实现方案（按视口宽度判断） #

不需要修改元素默认指针行为，只需要在你绑定的自定义点击事件逻辑内增加视口宽度判断，符合禁用条件时直接跳过自定义逻辑即可，完全不会影响浏览器原生的图片右键菜单、保存、新标签页打开等功能。

原有代码问题修正 #

• 原点击事件判断逻辑错误：img.style.width = "60%"是赋值操作，会永久返回真值，需要改成全等比较===
• 不需要给元素加pointer-events: none属性，保持默认值即可

完整实现代码 #

CSS代码

.img { 
  width: 60%;
  cursor: pointer;
  /* 移除 pointer-events: none 相关设置，避免拦截原生交互 */
}

JS代码

const img = document.getElementById("img");
// 自定义需要禁用自定义点击的视口宽度断点，可根据需求修改
const DISABLE_CLICK_MAX_WIDTH = 768;

img.addEventListener("click", function handleClick() {
  // 匹配禁用条件时直接终止逻辑，不执行自定义点击效果
  if (window.innerWidth <= DISABLE_CLICK_MAX_WIDTH) return;

  // 原有自定义点击逻辑
  if (img.style.width === "60%") {
    img.style.opacity = "0.5";
  }
});

HTML代码

保持原有代码不变即可：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <img src="https://live.staticflickr.com/3437/3403778548_15f48ab99e_b.jpg" class="img" id="img">
</body>
</html>

方案特点 #

• 原生交互100%保留：图片右键菜单所有选项（新标签页打开、另存为、复制图片地址等）、图片拖拽、默认点击行为完全不受影响
• 控制精准：仅在指定视口宽度下禁用自定义绑定的点击逻辑，不会干扰其他事件
• 兼容性好：所有现代浏览器均支持该实现，无额外依赖

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