JavaScript实现禁止右键保存图片与拖拽的代码示例
作者:听澜时间:2026-10-23 17:51:37浏览:303
本文介绍了在网页中通过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禁止右击保存图片或拖拽图片的内容,请查阅本站往期文章或继续浏览后续相关文章,感谢大家的支持!
作者最新文章
crypto-js 处理 Base64 和 Hex 编码转换的正确姿势
2026-11-05 16:39:11
ammo.js 内存管理:避免 Wasm 环境下的内存泄漏技巧
2026-11-05 10:21:09
JS几种补零方法的性能对比与选择建议
2026-11-04 21:17:50
JS数组去重最佳实践:Set、filter与reduce实现方案
2026-11-04 10:57:15
基准元素选择策略对 JavaScript 快速排序性能的影响
2026-11-03 22:37:29








