取消选择或禁用抓取图像和链接

Question

我从HTML5，CSS和Javascript构建了一个应用程序。问题是我想阻止鼠标抓取页面上的图像和链接。

例如，如果我将鼠标悬停在我的应用程序中的图像上并按住鼠标，则在按住的同时移动鼠标，图像的复制或半透明视图随指针一起提供。直到我放开了mousedown。如果可以，我想禁用它。对于我的页面上的任何锚标记（链接）也是如此。

希望这有点道理。我一直在寻找和尝试多种解决方案，如：

1. 制作元素：draggable=false
2. 使用：

   window.onload = function() {
       document.onmousemove = function() {
           return false;
       };
   };

   不确定这是否写得正确...
3. 身体：oncontextmenu="return false;">

对不起，似乎无法让代码块正常运行以上???

任何人都知道这是否可以做到？

Answer 1

在jQuery中：

$(document).on('mouseover mousedown', 'a, img', function() {
    return false;
});

jsFiddle example

请注意，这不会阻止人们复制您的图片/链接 - 他们仍然可以查看页面来源。它只会阻止默认的浏览器行为。

Answer 2

我想你可以尝试：

$("img").draggable("option", "draggable", false);

它应该保持您的图像标签不被拖动。

[新更新]

它可能不适用于您的'a'锚点，这可能与浏览器有关。

Answer 3

这是我的解决方案

• 防止突出显示文本✓
• 防止复制文本✓
• 防止拖动像图像的对象✓
• 禁用右键完全✓

JavaScript with jQuery reference:

$(document).ready(function() {

    // disabling text highlight on all browser    
    $('body').each(function(){
        $(this).css({
            '-webkit-touch-callout': 'none',
            '-webkit-user-select': 'none',
            '-khtml-user-select': 'none',
            '-moz-user-select': 'none',
            '-ms-user-select': 'none',
            'user-select': 'none'
        });
    });

    // disabling cut, copy, paste of DOM elements
    $(document).bind('cut copy paste', function(event) {
        event.preventDefault();
    });

    // disabling image dragging
    $('img').bind('mousedown selectstart', function(event) {
        event.preventDefault();
    });

});

// disabling right click completelly
function mischandler(){
    return false;
}
function mousehandler(e){
    var myevent = (isNS) ? e : event;
    var eventbutton = (isNS) ? myevent.which : myevent.button;
    if((eventbutton==2)||(eventbutton==3)) return false;
}
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
if(navigator.appName == "Netscape") {
    document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;

CSS code

body * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

jsFiddle sandbox

Answer 4

对于具有强制触控或3D触控的较新iPad或iPhone：

默认情况下，所有链接和图像标记都可以在safari中拖动，用户选择或触摸标注的CSS技巧都不能修复它。 （“mousedown”或“selectstart”）的事件阻止程序也没有修复它。

只需将draggable = false直接添加到标签中即可

<a href="https://www.w3schools.com" draggable="false">Visit W3Schools.com!</a>
<img src="smiley.gif" draggable="false" alt="Smiley face" height="42" width="42">