JavaScript实现禁止右键保存图片与拖拽的代码示例

作者：听澜

时间：2026-10-23

本文介绍了在网页中通过JavaScript和jQuery禁止用户右键保存图片、拖拽图片以及选中复制文本的具体实现代码。涵盖了原生JS事件监听与jQuery绑定事件两种方案，并附带了将图片保存至手机相册的示例逻辑，帮助开发者提升网页内容的版权保护能力。

文章目录

JavaScript禁止右键保存图片与拖拽实现

首先介绍如何使用JavaScript实现禁止右键保存图片的功能。

通过禁用鼠标右键事件来防止用户保存图片。


<img src="" oncontextmenu="return false;">

接下来演示如何禁止鼠标拖动图片。


<img src="" ondragstart="return false;">

此外，还可以禁止用户选中页面上的文字。


<p onselectstart="return false;">文字禁止鼠标选中</p>

实现禁止复制文本内容的效果。


<p onselect="document.selection.empty();">文字禁止鼠标选中</p>

利用jQuery框架来禁止文本的复制和拷贝操作。


$(document).bind("contextmenu copy selectstart", function() {
   return false;
});

使用jQuery技术禁止图片被拖拽。


var img=$("img");
img.on("contextmenu",function(){return false;});
img.on("dragstart",function(){return false;});

补充说明：关于如何将JS保存的图片存储到手机相册的方法。


/保存到相册
function savePic(){     
  var picurl= $("#picurl").attr("src");
  //alert(picurl);
  savePicture(picurl);
}


var triggerEvent = "touchstart";
function savePicture(Url){
  var blob=new Blob([''], {type:'application/octet-stream'});
  var url = URL.createObjectURL(blob);
  var a = document.createElement('a');
  a.href = Url;
  a.download = Url.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0];
  var e = document.createEvent('MouseEvents');
  e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  a.dispatchEvent(e);
  URL.revokeObjectURL(url);
}

至此，关于JavaScript禁止右击保存图片及禁止拖拽图片的实现代码介绍完毕。如需了解更多相关js禁止右击保存图片或拖拽图片的内容，请查阅本站往期文章或继续浏览后续相关文章，感谢大家的支持！