使用Javascript,我正在寻找一种方法来使整个页面将用户重定向到另一个页面,而不管他们在页面上单击的位置如何,并且无论该元素是否已经具有click事件监听器。 无论如何,我都想重定向它们。

另外,如果可能的话,我也不想使用固定样式的封面元素,而是让它们单击。

到目前为止,这是我尝试过的方法:

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

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

它工作得很好,但事实是,如果用户单击锚标记,它不会重定向。

有什么解决方案可以做到这一点吗?

#1楼 票数:1 已采纳

true作为最后一个arg添加到addEventListener中(这意味着它是捕获事件,应在常规事件之前进行处理),并停止事件的传播并阻止处理程序中的默认操作,以防止链接单击重定向:

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

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

#2楼 票数:1

您将要使用事件生命周期的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()

  ask by Radical_Activity translate from so

未解决问题?本站智能推荐:

3回复

使用z-index时如何在不将所有其他元素z-index设为负的情况下使链接可点击?

我正在尝试创建一个带有按钮和工具栏的下拉框,以便我的下拉菜单位于工具栏后面但在主元素前面。 问题是要这样做,我使用带负值的z-index,因为在工具栏上使用正值会由于位置和层次结构而使其滞后于我的下拉框。 我知道,如果我去改变元素的z-index的在我的DOM以较小的负值(如建议在这里 )
1回复

如何在不使用React重新渲染整个列表的情况下添加新元素

我正在开发简单的流应用程序。 我有帖子列表,此列表可以接收更新,更新将显示在其顶部。 问题是在每个新帖子上收到React重新渲染元素的整个列表。 我为此做了一个简单的例子。 有什么办法可以避免这种行为? 我已经在React文档上看到了dynamic-children主题,但是在示例
4回复

如何使锚标签在没有文本的情况下可点击

我正在建立一个个人网站,并通过相应的图标链接到社交媒体。 但是,该链接不可单击。 这是我的问题的JSFiddle: http : //jsfiddle.net/mufeeza/v9s7psf2/
1回复

如何在没有下划线的情况下使脉轮行可点击

我能够在表格中创建一行可点击,这就是我想要的: https://codesandbox.io/s/crazy-sinoussi-hxtwj?file=/src/app.js 但是,我不希望第一个单元格有下划线。 我只是希望它显示为常规文本。 我怎样才能做到这一点?
1回复

如何在不影响内部锚点的情况下使li可点击?

我在li下方列出了我要使用的产品列表: 当用户单击li上的任意位置时,我想使用它发送到产品详细信息页面,例如/ product / id /。 当用户将鼠标悬停在li上时,我还会显示一个图标,单击该图标可使用户在“收藏夹”中添加产品。 我知道我可以使整个li都可点击,并使用javasc
3回复

如何在不使用JS的情况下使用TOC滚动页面上的固定位置元素?

任何想法如何解决这个问题:在具有TOC(目录)的页面上,链接指向同一页面内的主题标签,当浏览器向下滚动时,其他固定位置元素将其隐藏。 浏览器应向下滚动以避免被固定元素隐藏。 小提琴来演示这个问题: https : //jsfiddle.net/fcro6mth/单击第一节或第二节 - 浏览
3回复

如何在不使用div的情况下使iframe响应?

我从这篇帖子( 使iframe响应 )中了解到,通过在iframe周围添加一个带有类的容器来使iframe响应,例如, 是否有可能直接在我的帖子中嵌入<iframe>...</iframe> (不使用<div>...</div> )? 我尝试
1回复

如何在不使用jQuery或AJAX的情况下从另一个页面获取HTML元素?

我试图不使用Jquery或AJAX来获取另一页中的td的ID。