Firefox有这种烦人的行为,它让用户默认拖放任何图像元素。如何使用jQuery干净地禁用此默认行为?
答案 0 :(得分:30)
以下内容将在Firefox 3及更高版本中执行:
$(document).on("dragstart", function() {
return false;
});
如果您不想禁用所有拖动(例如,您可能仍希望允许用户将链接拖动到其链接工具栏),则可以确保仅阻止<img>
元素拖动:
$(document).on("dragstart", function(e) {
if (e.target.nodeName.toUpperCase() == "IMG") {
return false;
}
});
请记住,这将允许拖动链接中的图像。
答案 1 :(得分:8)
它需要是jQuery吗?您只需要使用event.preventDefault()
为相关图像上的mousedown事件定义回调函数。
因此,您的图片代码可能如下所示:
<img src="myimage.jpg" onmousedown="if (event.preventDefault) event.preventDefault()" />
需要额外的if
,否则IE会抛出错误。如果您想为所有图像标记使用此标记,则只需使用jQuery迭代img
标记并附加onmousedown事件处理程序。
在这个页面上有一个很好的解释(和示例):“Disable image dragging in FireFox”和一个没有记录的版本在这里使用jQuery作为参考:“Disable Firefox Image Drag”
答案 2 :(得分:5)
没有jQuery的解决方案:
document.addEventListener('dragstart', function (e) {
e.preventDefault();
});
答案 3 :(得分:5)
如果Javascript是可选要求,您可以尝试使用CSS
.wrapper img {
pointer-events: none;
}
答案 4 :(得分:2)
引用 Tim Down 的解决方案,您可以在使用jQuery时实现相当于仅禁用img
拖动的第二个代码段:
$(document).on("dragstart", "img", function() {
return false;
});
答案 5 :(得分:0)
我不记得我的来源,但工作
<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>