如何编写脚本实现右键点击特定图片时弹出alert提示

为什么绑定onclick无法生效 #

click事件仅响应鼠标左键点击操作，右键点击不会触发该事件。右键点击网页元素对应的专有事件是contextmenu，你之前绑定的事件类型错误，所以没有生效。

是否需要禁用浏览器默认右键菜单 #

根据你的需求选择即可：

• 若只需要额外弹出Alert提示，同时保留浏览器默认右键菜单（保存图片、复制图片地址等功能），不需要禁用默认菜单
• 若希望右键点击该图片时仅弹出你的自定义提示，不展示系统默认右键菜单，就需要阻止默认事件行为

具体实现代码 #

方案1：保留默认右键菜单，仅额外弹出Alert #

首先给目标图片加唯一ID标识：

<img id="targetImg" src="你的图片路径" alt="指定图片">

JS 绑定事件：

const targetImg = document.getElementById('targetImg')
targetImg.addEventListener('contextmenu', function () {
  alert('你右键点击了指定图片')
})

方案2：禁用默认右键菜单，仅展示自定义Alert #

仅需在事件回调中添加阻止默认行为的逻辑即可：

const targetImg = document.getElementById('targetImg')
targetImg.addEventListener('contextmenu', function (e) {
  e.preventDefault() // 阻止默认右键菜单弹出
  alert('你右键点击了指定图片')
})

极简内联写法 #

也可以直接把逻辑写在图片标签属性中：

<!-- 保留默认右键菜单 -->
<img src="你的图片路径" alt="指定图片" oncontextmenu="alert('你右键点击了指定图片')">
<!-- 禁用默认右键菜单 -->
<img src="你的图片路径" alt="指定图片" oncontextmenu="alert('你右键点击了指定图片'); return false">

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