Javascript 如何使用 jQuery 禁用 Firefox 对所有图像行为的默认拖放？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3873595/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable Firefox's default drag and drop on all images behavior with jQuery?
提问by Void
Firefox has this annoying behavior that it let's the user drag and drop any image element by default. How can I cleanly disable this default behavior with jQuery?
Firefox 有一个令人讨厌的行为，它让用户默认拖放任何图像元素。如何使用 jQuery 彻底禁用此默认行为？
回答by Tim Down
The following will do it in Firefox 3 and later:
以下将在 Firefox 3 及更高版本中执行此操作：
$(document).on("dragstart", function() {
return false;
});
If you would prefer not to disable all drags (e.g. you may wish to still allow users to drag links to their link toolbar), you could make sure only <img>element drags are prevented:
如果您不想禁用所有拖动（例如，您可能仍希望允许用户将链接拖动到其链接工具栏），则可以确保仅<img>阻止元素拖动：
$(document).on("dragstart", function(e) {
if (e.target.nodeName.toUpperCase() == "IMG") {
return false;
}
});
Bear in mind that this will allow images within links to be dragged.
请记住，这将允许拖动链接内的图像。
回答by Dennis G
Does it need to be jQuery? You just need to define a callback function for your mousedown event on the image(s) in question with event.preventDefault().
它需要是jQuery吗？您只需要为有问题的图像上的 mousedown 事件定义一个回调函数event.preventDefault()。
So your image tag could look like this:
所以你的图片标签可能是这样的：
<img src="myimage.jpg" onmousedown="if (event.preventDefault) event.preventDefault()" />
<img src="myimage.jpg" onmousedown="if (event.preventDefault) event.preventDefault()" />
The additional ifis needed because otherwise IE throws an error. If you want this for all image tags you just need to iterate through the imgtags with jQuery and attach the onmousedown event handler.
if需要额外的，否则 IE 会抛出错误。如果您希望所有图像标签都使用它，您只需要img使用 jQuery遍历标签并附加 onmousedown 事件处理程序。
There is a nice explanation (and example) on this page: "Disable image dragging in FireFox" and a not as well documented version is here using jQuery as reference: "Disable Firefox Image Drag"
此页面上有一个很好的解释（和示例）：“在 FireFox 中禁用图像拖动”，这里使用 jQuery 作为参考的一个没有很好记录的版本：“禁用 Firefox 图像拖动”
回答by shi
Solution without jQuery:
没有 jQuery 的解决方案：
document.addEventListener('dragstart', function (e) {
e.preventDefault();
});
回答by José Antonio
If Javascript is an optional requirement, you can try with CSS
如果 Javascript 是可选要求，您可以尝试使用 CSS
.wrapper img {
pointer-events: none;
}
回答by Prusprus
Referencing Tim Down's solution, you can achieve the equivalent of his second code snippet of only disabling imgdrags while using jQuery:
参考Tim Down的解决方案，您可以img在使用 jQuery 时实现仅禁用拖动的第二个代码片段的等效效果：
$(document).on("dragstart", "img", function() {
return false;
});
回答by vb078
I don't remember my source but work
我不记得我的来源但工作
<script type="text/javascript">
// register onLoad event with anonymous function
window.onload = function (e) {
var evt = e || window.event,// define event (cross browser)
imgs, // images collection
i; // used in local loop
// if preventDefault exists, then define onmousedown event handlers
if (evt.preventDefault) {
// collect all images on the page
imgs = document.getElementsByTagName('img');
// loop through fetched images
for (i = 0; i < imgs.length; i++) {
// and define onmousedown event handler
imgs[i].onmousedown = disableDragging;
}
}
};
// disable image dragging
function disableDragging(e) {
e.preventDefault();
}
</script>
