使用 JavaScript 禁用 YouTube 链接？答案

【问题标题】：Disable YouTube links with JavaScript?使用 JavaScript 禁用 YouTube 链接？
【发布时间】：2018-05-01 13:33:29
【问题描述】：

我正在开发一个 Tampermonkey 脚本，让您只需单击文本即可在 youtube 上编辑文本。我还想在 YouTube 上编辑建议的视频，但要做到这一点，我需要暂时禁用链接。 linkElement.onclick = function(e){return false;}; 适用于大多数链接，但由于某种原因，它不适用于 YouTube 链接。有人知道为什么这不起作用吗？

它通常工作的示例：

<a id='testlink' href='http://stackoverflow.com'>Test link</a>
<br />
<button onclick='document.getElementById("testlink").onclick=function(e){return false;};'>Disable link</button>

就像我说的，这在 YouTube 上不起作用，而且我不知道他们的链接使用什么代码。我认为这与它似乎始终是一个无缝页面有关。

【问题讨论】：

嗨！不确定 YouTube 链接行为是什么。但是您认为将href 值设置为临时数据属性并将href 值替换为javascript:void(0) 是什么？喜欢：<a href="javascript:void(0)" data-real-link="http://stackoverflow.com/">Video</a>

标签： javascript youtube tampermonkey

【解决方案1】：

您最好的选择可能是使用useCapture 添加一个全局（即在window 对象上）事件侦听器，然后使用event.stopImmediatePropagation()。

例如，阻止对锚元素的所有点击：

window.addEventListener('click', function(event) {
  var currentEl = event.target;
  while (currentEl && currentEl.tagName !== 'A') currentEl = currentEl.parentNode; 
  if (!currentEl) return;
  event.preventDefault();
  event.stopImmediatePropagation();
}, true); // true is for `useCapture`

但这还不够，因为 youtube 有自己的加载方法来切换页面，而无需进行实际的页面刷新或点击实际的锚点。

因此，您可以推广此方法以防止对除您控制的元素之外的几乎所有元素进行click 事件处理：

function isAllowed(el) {
  // custom logic. e.g. block everything
  return false;
}

window.addEventListener('click', function(event) {
  if (isAllowed(event.target)) return;
  event.preventDefault();
  event.stopImmediatePropagation();
}, true);

【讨论】：