繁体   English   中英

如何在不使用Java封面元素的情况下使整个页面可点击?

How to make the whole page clickable without using any cover elements with Javascript?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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

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

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

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

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

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

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

2 个回复

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

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

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

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

2 如何使整个块可点击?

我已经创建了一个导航菜单,但是我面临的问题是,当我将鼠标悬停在每个菜单块的边缘时,ancor标签不起作用,仅当我将鼠标放在文本附近时它才起作用。 我的问题是我想使整个块都可点击吗? 在这里摆弄 。 标记。 CSS。 ...

2013-09-15 18:33:39 3 2398   html/ css
4 如何使整个div可点击

我正在制作菜单并有一个简单而愚蠢的问题。 问题是:我在' div有<span>元素。 使用id '#menu' 。 我已经创建了一个功能,您不会通过CSS visibility意外地点击<span>的<a> 。 但现在如果你点击白色条纹之间的空间菜单, ...

6 如何使iPhone应用程序覆盖整个屏幕?

我是使用xCode开发iPhone应用程序的新手,但我设法使我的第一个应用程序运行。 唯一的问题是,它应该从上到下覆盖整个屏幕(以及iPhone XS的小左上角和右上角)。 我使用Turblolinks框架将网站加载到我的iOs应用程序中。 我的代码利用了WebKit。 为了使其全屏 ...

8 如何使用 javascript 使整行可点击?

我有一个表格并以特定格式编写了一些 html 代码,我想让行可点击,然后我必须编写它的 function。 这是代码var table = $("<table>"); table.append($("<tr><th>Name</th><th&g ...

10 如何使整个列表项可点击

我想知道如何使整个列表项可单击,而不仅仅是单词。 在我的列表中,我只能单击单词。 如何将整个列表区域变成链接? 我的列表中包含链接,但我希望您能够单击列表区域内的任何位置以进行重定向。 谢谢。 而且我是这个网站的新手,所以很抱歉如果我问错了。 ...

2014-07-27 20:26:06 2 850   html/ css
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM