如何禁用嵌入标签上的右键单击？

Question

实际上，我想防止用户下载PDF文件。 尝试通过添加事件侦听器禁用它。

useEffect(() => {
    let element = document.getElementById('pdf-div')

    if(element)
      element.addEventListener("contextmenu", (event: any) => event.preventDefault());
  }, [])
  return (
    <>
      {
        file.includes('.png') ? 
          <img src={require(`./../../mocks/${file}`)} alt="" className='pdf-document-img' /> :
          <object id={'pdf-div'} ref={ref} className='pdf-document' data={`${file}#toolbar=0`} type="application/pdf">
            <embed id={'pdf-div'} ref={ref} src={file} type="application/pdf" />
          </object>
      }
    </>
  );

- Awais Rafiq Chaudhry

---

它是否适用于其他元素，还是只是不适用于嵌入？ - B''H Bi'ezras -- Boruch Hashem

适用于所有内容，但<embed>无法正常工作。 - Awais Rafiq Chaudhry

嵌入式对象是否会触发上下文菜单事件？你尝试过使用控制台记录吗？ - B''H Bi'ezras -- Boruch Hashem

嗨，@AwaisRafiqChaudhry，你能在这里发布你的答案吗？ - Sai kumar

Answer 1

如果你的最终目标是防止用户下载PDF文件或任何其他文件，那么你会遇到问题。有一些具有一定知识水平的恶意用户可以获取你提供的任何文件。如果他们能看到它，他们就可以下载它。JavaScript 可以防止在嵌入式上右键单击，但不能阻止他们下载它。

无论如何，回答你的问题。从我所看到的情况来看，你在这里有两个直接的选择：看起来你正在尝试防止用户右键单击图像以及 PDF 文件。特别是嵌入式不起作用。

因此，在那一点上，为什么不完全禁用页面的右键单击？

var message="Function Disabled!";

function clickIE4(){
    if (event.button==2){
        alert(message);
        return false;
    }
}

function clickNS4(e){
    if (document.layers||document.getElementById&&!document.all){
        if (e.which==2||e.which==3){
            alert(message);
            return false;
        }
    }
}

if (document.layers){
    document.captureEvents(Event.MOUSEDOWN);
    document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
    document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

<img src="https://www.w3schools.com/howto/img_woods_wide.jpg"/>

<h1>Test text</h1>
<p> Pure Javascript option to disable right-click on page entirely, rather than only on certain elements, etc </p>

如果您仍希望用户能够右键单击，则对于嵌入的pdf文件，请使用另一个元素覆盖它们，以便用户右键单击该元素。

请查看此问题，以获取如何执行此操作的示例。我们无法在Stack Overflow上嵌入pdf文件，因此他使用图像作为示例，但您应该可以理解这个想法。

- Ryan

---

我有一个问题。我同意，阻止一个决心下载的用户是不可能的，但在我的情况下，关键是让那些没有意识到不应该下载文件的普通用户感到困难。禁用整个页面的右键点击似乎太过极端，但你能否只在object/embed标签内禁用右键点击呢？ - undefined