个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
Vanilla JS。如果 body 标签的类别为 example，则尝试在单击元素时运行函数.没有 jQuery请解决方案，我来自jQuery并想在 JavaScript 中学习和理解这个简单的任务.
如果你想告诉我更多，请问我的想法错误在哪里？我需要包装 onclick 吗？ body 类条件内的事件？ Tried that but also not getting the alert .
var imgContainer = document.querySelector('.img-container');
var bodyTag = document.getElementsByTagName('body');
var bodyClassName = bodyTag.classname;
imgContainer.onclick = infoBox;
function infoBox(event) {
if (bodyTag.classList.contains("example")) {
alert('img-container has been clicked');
}
}<body class="example">
<div class="img-container">
<img src="https://dummyimage.com/320x120/000/fff" alt="dummy image">
<div class="img-infobox">
<p>This is a dummy image from https://dummyimage.com/</p>
</div>
</div>
</body>编辑
根据给定的答案，我认为与其返回像对象这样的数组并查询 DOM，不如只返回 document.body 是最快的。 .没有？
这意味着这个问题与
What do querySelectorAll, getElementsByClassName and other getElementsBy* methods return?
自 https://stackoverflow.com/users/949476/dfsq 的评论提供的答案以来不使用链接答案中的任何一种方法。
还有
如何比较使用 document.querySelector 的速度与 document.getElementsByTagName('body')[0];与 document.body好吗？
想解释一下为什么我接受了公平的答案，因为所有答案都提供了可行的解决方案。
回答
由于所有答案都有效并且 document.body is fastest但还有另一个原因，我喜欢在这里发布我的答案。
我正在使用来自 "4 novel ways to deal with sticky :hover effects on mobile devices" 的脚本处理粘性悬停问题。有了这个，一个类被添加到 html网站的标签。
起初我在条件中有点击函数来检查 body 或 html 类，并且只有在满足类时才触发点击函数，但是使用这个脚本我必须首先运行该函数并且只有一次运行检查 html/body 是否有想要的类。
所以当
if (bodyTag.classList.contains("example")) {
imgContainer.onclick = infoBox;
function infoBox(event) {
alert('img-container has been clicked and body has class "example"');
}
还有
var bodyClassName = bodyTag.classname;
imgContainer.onclick = infoBox;
function infoBox(event) {
if (bodyTag.classList.contains("example")) {
alert('img-container has been clicked');
}
}
在纯 JSFiddle 中工作，它不适用于此设置，因为一旦进行触摸，粘性悬停脚本就会在元素上设置所需的类。
因此，一旦进行了点击(我假设)，检查此触摸/点击/点击事件之外的条件已经太晚了，因此它不会触发。
最后，这导致这些简单的行与粘性悬停脚本一起工作得很好。单击事件必须首先运行，然后检查所需的类/条件。
var imgContainer = document.querySelector('.img-container');
imgContainer.onclick = infoBox;
function infoBox(){
if (document.documentElement.classList.contains('can-touch')) {
alert('click on touch');
}
}
最佳答案
用于选择正文元素的选择器不合适。
getElementsByTagName 将给出类似对象的数组，因此您必须使用索引来获取第一个元素。
阅读:https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName
您已经在使用返回第一个匹配元素的 querySelector，对 body 也做同样的事情。
阅读:https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
var imgContainer = document.querySelector('.img-container');
var bodyTag = document.querySelector('body');
var bodyClassName = bodyTag.classname;
imgContainer.onclick = infoBox;
function infoBox(event) {
if (bodyTag.classList.contains("example")) {
alert('img-container has been clicked and body has class "example"');
}
}<body class="example">
<div class="img-container">
<img src="https://dummyimage.com/320x120/000/fff" alt="dummy image">
<div class="img-infobox">
<p>This is a dummy image from https://dummyimage.com/</p>
</div>
</div>
</body>关于javascript - 检查元素是否具有单击另一个元素的类并运行函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41662790/
24
4
0
我有一个 if 语句，如下所示 if (not(fullpath.lower().endswith(".pdf")) or not (fullpath.lower().endswith(tup
然而，在 PHP 中，可以: only appears if $foo is true. only appears if $foo is false. 在 Javascript 中，能否在一个脚
XML有很多好处。它既是机器可读的，也是人类可读的，它具有标准化的格式，并且用途广泛。 它也有一些缺点。它是冗长的，不是传输大量数据的非常有效的方法。 XML最有用的方面之一是模式语言。使用模式，您可
由于长期使用 SQL2000，我并没有真正深入了解公用表表达式。 我给出的答案here (#4025380)和 here (#4018793)违背了潮流，因为他们没有使用 CTE。 我很欣赏它们对于递
我有一个应用程序: void deleteObj(id){ MyObj obj = getObjById(id); if (obj == null) { throw n
我的代码如下。可能我以类似的方式多次使用它，即简单地说，我正在以这种方式管理 session 和事务: List users= null; try{ sess
在开发J2EE Web应用程序时，我通常会按以下方式组织我的包结构 com.jameselsey.. 控制器-控制器/操作转到此处 服务-事务服务类，由控制器调用 域-应用程序使用的我的域类/对象 D
这更多是出于好奇而不是任何重要问题，但我只是想知道 memmove 中的以下片段文档: Copying takes place as if an intermediate buffer were us
路径压缩涉及将根指定为路径上每个节点的新父节点——这可能会降低根的等级，并可能降低路径上所有节点的等级。有办法解决这个问题吗？有必要处理这个吗？或者，也许可以将等级视为树高的上限而不是确切的高度？ 谢
我有两个类，A 和 B。A 是 B 的父类，我有一个函数接收指向 A 类型类的指针，检查它是否也是 B 类型，如果是将调用另一个函数，该函数接受一个指向类型 B 的类的指针。当函数调用另一个函数时，我
有没有办法让 valgrind 使用多个处理器？ 我正在使用 valgrind 的 callgrind 进行一些瓶颈分析，并注意到我的应用程序中的资源使用行为与在 valgrind/callgrind
假设我们要使用 ReaderT [(a,b)]超过 Maybe monad，然后我们想在列表中进行查找。 现在，一个简单且不常见的方法是: 第一种可能性 find a = ReaderT (looku
我的代码似乎有问题。我需要说的是: if ( $('html').attr('lang').val() == 'fr-FR' ) { // do this } else { // do
根据this文章(2018 年 4 月)AKS 在可用性集中运行时能够跨故障域智能放置 Pod，但尚不考虑更新域。很快就会使用更新域将 Pod 放入 AKS 中吗？ 最佳答案 当您设置集群时，它已经自
course | section | type comart2 : bsit201 : lec comart2 :
我正在开发自己的 SDK，而这又依赖于某些第 3 方 SDK。例如 - OkHttp。 我应该将 OkHttp 添加到我的 build.gradle 中，还是让我的 SDK 用户包含它？在这种情况下，
随着 Rust 越来越充实，我对它的兴趣开始激起。我喜欢它支持代数数据类型，尤其是那些匹配的事实，但是对其他功能习语有什么想法吗？ 例如标准库中是否有标准过滤器/映射/归约函数的集合，更重要的是，您能
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎与 help center 中定义的范围内的编程无关。 . 关闭 9 年前。 Improve
我一直在研究 PHP 中的对象。我见过的所有示例甚至在它们自己的对象上都使用了对象构造函数。 PHP 会强制您这样做吗？如果是，为什么？ 例如: firstname = $firstname;
...比关联数组？ 关联数组会占用更多内存吗？ $arr = array(1, 1, 1); $arr[10] = 1; $arr[] = 1; // <- index is 11; does the
我是一名优秀的程序员,十分优秀！