1

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

例如，如果我将鼠标悬停在我的应用程序中的图像上并按住鼠标，然后在按住的同时移动鼠标，则指针会附带图像的副本或半透明视图。直到我松开鼠标。如果可以的话，我想禁用它。我页面上的任何锚标签（链接）也是如此。

希望这有点道理。我一直在搜索并尝试了多种解决方案，例如：

  1. 制作元素：draggable=false

  2. 使用：

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

    不知道这是否写正确...

  3. 身体： oncontextmenu="return false;">

抱歉，似乎无法让代码块在上述情况下正常运行？？？

有人知道这是否可以做到吗？

4

4 回答 4

0

Here is my solution to

  • prevent highlighting text ✓
  • prevent copying text ✓
  • prevent dragging objects like images ✓
  • disable right click completely ✓

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

于 2013-10-15T21:49:59.883 回答
0

我想你可以试试：

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

它应该防止您的图像标签被拖动。

[新更新]

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

于 2013-10-15T21:26:58.603 回答
0

在 jQuery 中：

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

jsFiddle 示例

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

于 2013-10-15T20:53:10.097 回答
0

关于具有 forcetouch 或 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">
于 2017-12-27T03:03:06.523 回答