當超鏈接行為是由例如HTML按鈕的"點擊"事件處理虛擬創建的，如何防止打開一個新的標簽或視窗？

在<a>標簽的情況下，我可以通過洗掉target屬性來禁止打開新的標簽或視窗，例如：target='_blank'

在某些情況下，代替<a>網站把<button>和添加onClick()或submit()等，它以編程方式生成一個鏈接并設定target屬性。

< button id="653cde4c-1620-11ec-85b5-5ae26c154b46"/span>>
    <div>點擊這里</div>/span>
</button>/span>

在某些

在這種情況下，<button>提供鏈接點擊功能。我不能查看和編輯onClick()或submit()等，因為它是webpack生成的javascript。我只能在devtools控制臺中加載該webapge后運行我的javascript代碼。

在這種情況下，我怎樣才能禁止打開瀏覽器的新標簽或新視窗？或者我應該運行什么javascript代碼來覆寫<button>鏈接行為？

uj5u.com熱心網友回復：

可能在onClick()中的邏輯做了類似window.open(url, [params])的事情。你可以把它改為設定window.location.href = url;，然后url將被加載到同一個視窗中。

uj5u.com熱心網友回復：

取決于基于webpack的代碼如何管理資源的標簽處理，一個可能的解決方案是在window.open周圍包裹自己的代碼，甚至用自己的實作完全取代它。

至于包裝，根據截獲的資料，我們可以決定是否完全抑制url處理，或者不打開一個新的標簽/視窗，而是轉發到location.href，甚至繼續呼叫原始的window.open。

// untouchable 3rd party code.
//
function alienLocationHandler({ currentTarget }) {
  let { url, target } = currentTarget.dataset。

  url = (url ? ? '').trim()。
  if (url) {

    target = (target ? ? '').trim()。
    if（目標）{

      //由于SO的權限處理...。
      //
      //... 阻止了在中打開'https://stackoverflow.com/'。
      //新視窗，因為該請求是在一個沙盒中提出的。
      //框架，其'allow-popups'權限未被設定。
      //
      window.open（url, target）。
    } else {
      window.location.href = url;
    }
  }
}
document.
  .querySelectorAll('[data-url]'/span>)
  .forEach(elmNode =>)
    elmNode.addEventListener('click'/span>, alienLocationHandler)
  );


//一種可能的方法 :: 圍繞著`window.open`進行包裝
//
window.open = (function createAroundHandler(proceed, thisArg) {
  return function aroundWindowOpen（url, target, ...rest） {

    console.log('roundWindowOpen ... ', {
      url,
      目標。
      剩余部分。
    });

    // - 所有的代碼只是為了演示。
    // - 所有的代碼都是為了演示。
    // - OP必須拿出自己的處理程式邏輯來做。
    ///適合OP的需求。
    
    if (url !== 'https://stackoverflow.com') {

      //呼叫原始的`window.open`。
      ///將被SO的權限處理阻止。

      proceed.call（thisArg, url, target, ...rest）。

    } else {
      //延遲轉發到`location.href`.。

      setTimeout(() => { window. location.href = url }, 5000）。)
    }
  };
}(window.open, window) );

body { margin: 0; }
.as-console-wrapper { min-hight: 87%; top: auto; }

<button data-url="https://stackoverflow. com">
  沒有攔截
</button> 

<button
  data-url="https://google.com"。
  data-target='google'/span>
  >
  攔截了&amp;打開嘗試  
</button> 

<button
  id="_653cde4c-1620-11ec-85b5-5ae26c154b46"
  data-url="https://stackoverflow.com"
  data-target='_blank'。
  >
  被攔截并轉發，延遲5秒
</button> 

另一種方法是利用事件委托，通過監聽和處理click事件，例如在document.body級別。

// untouchable 3rd party code.
//
function alienLocationHandler({ currentTarget }) {
  let { url, target } = currentTarget.dataset。

  url = (url ? ? '').trim()。
  if (url) {

    target = (target ? ? '').trim()。
    if（目標）{

      //由于SO的權限處理...。
      //
      //... 阻止了在中打開'https://stackoverflow.com/'。
      //新視窗，因為該請求是在一個沙盒中提出的。
      //框架，其'allow-popups'權限未被設定。
      //
      window.open（url, target）。
    } else {
      window.location.href = url;
    }
  }
}
document.
  .querySelectorAll('[data-url]'/span>)
  .forEach(elmNode =>)
    elmNode.addEventListener('click'/span>, alienLocationHandler)
  );


//另一種可能的方法：：事件委托。
//
// - [https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_delegation]
// - [https://davidwalsh.name/event-delegate]/span>
//
// - [https://javascript.info/event-delegation]
// - [https://learn.jquery.com/events/event-delegation/]/span>
//
function isButtonEvent(activeElement, targetNode) {
  return (activeElement.tagName.toLowerCase() === 'button') & & (
    activeElement.isSameNode(targetNode) ||
    activeElement.contains(targetNode)
  );
}
function preventSpecificButtonClickBehavior（evt） {
  const elmButton = document.activeElement;

  if (isButtonEvent(elmButton, evt.target) {
    const url = (elmButton.dataset.url ? ''）.trim（）。

    const isUrlBasedPrevented = (url !== 'https://stackoverflow.com')。
    const isIdBasedPrevented = ((elmButton.id ? '').trim() !== '') 。

    if (isUrlBasedPrevented || isIdBasedPrevented) {
      evt.stopImmediatePropagation（）。
      evt.stopPropagation（）。

      if (isUrlBasedPrevented) {
        console.log('prevented button click behavior ... 基于URL的')
      }
      if (isIdBasedPrevented) {
        console.log('prevented button click behavior ... 基于ID的')
      }
    }
  }
}
document.
  .body
  .addEventListener(
    'click'。
    preventSpecificButtonClickBehavior,
    // - [https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#parameters]/span>
    // - 布爾型 "useCapture "引數/標志如果設定為 "true "值，就能起到作用。
    true
  );

body { margin: 0; }
.as-console-wrapper { min-hight: 87%; top: auto; }

<button data-url="https://stackoverflow. com">
  點擊行為未被阻止
</button> 

<button
  id="_653cde4c-1620-11ec-85b5-5ae26c154b46"
  data-url="https://stackoverflow.com"
  >
  被阻止的行為（基于ID
</button> 

<button
  data-url="https://google.com"。
  data-target='google'/span>
  >
  <span> 
    <span>/span>
      阻止的行為(基于URL)
    </span>防止的行為（基于url）。
  </span>/span>
</button>/span>

標籤：

上一篇： <asideclass="s-notices-notice__infojs-post-noticemb16js-bounty-notification"role="

下一篇：如何用風格化的組件覆寫React組件的風格？