如何在不使用Java封面元素的情況下使整個頁面可點擊？

Question

使用Javascript，我正在尋找一種方法來使整個頁面將用戶重定向到另一個頁面，而不管他們在頁面上單擊的位置如何，並且無論該元素是否已經具有click事件監聽器。 無論如何，我都想重定向它們。

另外，如果可能的話，我也不想使用固定樣式的封面元素，而是讓它們單擊。

到目前為止，這是我嘗試過的方法：

function clickBody()
{
    window.location.href = 'http://google.com';
}

document.body.addEventListener("click", clickBody);

它工作得很好，但事實是，如果用戶單擊錨標記，它不會重定向。

有什么解決方案可以做到這一點嗎？

Answer 1

將true作為最后一個arg添加到addEventListener中（這意味着它是捕獲事件，應在常規事件之前進行處理），並停止事件的傳播並阻止處理程序中的默認操作，以防止鏈接單擊重定向：

function clickBody(e) {
  e.preventDefault();
  e.stopPropagation();
  window.location.href = 'http://google.com';
}

document.body.addEventListener("click", clickBody, true);

Answer 2

您將要使用事件生命周期的capturing階段。 從MDN

在捕獲階段：

瀏覽器檢查元素的最外層祖先（）是否在捕獲階段中注冊了onclick事件處理程序，如果是，則運行該事件處理程序。 然后，它繼續前進到內部的下一個元素並執行相同的操作，然后執行下一個，依此類推，直到到達實際單擊的元素。

在冒泡階段，正好相反：

瀏覽器檢查在冒泡階段實際單擊的元素是否在其上注冊了onclick事件處理程序，如果是，則運行該事件處理程序。 然后，它繼續前進到下一個直接祖先元素，並執行相同的操作，然后再執行下一個，依此類推，直到到達該元素。

function clickBody()
{
    window.location.href = 'http://google.com';
}

document.body.addEventListener("click", clickBody, true);

這里的第三個參數將事件指定為捕獲。 https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener

極有可能，javascript應當足夠快地執行以擊敗鏈接的默認操作。 但是為了安全起見，您可能需要添加event.preventDefault() 。