- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个包含其他 div 元素的容器 div:
<div id="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
如何用纯 JS 重写以下 jQuery?
$('#container').on('mouseenter', 'div', myFunction)
也就是说,我如何监听哪个子鼠标悬停在其上以便应用于它myFunction
?我已尝试以下操作,但这仅适用于 myFunction
容器 div:
container.addEventListener('mouseenter', function(event) {
let hoveredElement = event.target;
if (hoveredElement.tagName === 'DIV') {
myFunction(hoveredElement);
}
});
#container { width: 200px; }
#container > div { height: 100px; background-color: red; }
<div id="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
我也尝试过 event.currentTarget
,但它仍然给出相同的结果。
附:我不想将事件监听器放在容器 div 的子级上,因为有大量的子级。
编辑:我已经删除了console.log(hoveredElement);
这是一行用于调试的行。
最佳答案
我在 Chrome 上调试了 jQuery,jQuery mouseenter
事件实际上在幕后使用 mouseover
事件。
在 jQuery 源代码的第 4095 行中,有一行在每次触发事件时运行:
jQuery.event.dispatch.apply( elem, 参数 );
如果您暂停并检查参数
,您会发现它是一个类型为mouseover
的MouseEvent。
这是有道理的,因为您使用的是 jQuery 的委托(delegate)事件处理程序语法,并且 jQuery 足够聪明,可以替代 mouseenter
which doesn't bubble and doesn't trigger as you move through the event handler's descendents 鼠标悬停
which does fire when you move through the listener's children 。
因此,您的解决方案本质上将执行 jQuery 正在执行的操作 - 使用 mouseover
:
container.addEventListener('mouseover', function(event) {
console.log("mouseover target", event.target);
console.log("mouseover currentTarget", event.currentTarget);
});
container.addEventListener('mouseenter', function(event) {
console.log("mouseenter target", event.target);
console.log("mouseenter currentTarget", event.currentTarget);
});
$('#container').on('mouseenter', '.child', function(event) {
console.log('jquery mouseenter target', event.target);
console.log('jquery mouseenter currentTarget', event.currentTarget);
console.log('jquery mouseenter delegateTarget', event.delegateTarget);
});
.child {
border: 1px solid #007;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<div id="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
关于javascript - 将 jQuery 的 .on ('mouseenter' ) 重写为纯 JS 变体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46715213/
可以抛出异常的函数可以有[pure]属性吗? 最佳答案 根据 https://msdn.microsoft.com/en-us/library/system.diagnostics.contracts
我使用的是纯 css 推送导航。它工作得很好,但是我不知道如何在单击导航链接时隐藏菜单。您必须手动单击菜单图标才能使菜单返回隐藏状态。但是,当单击链接并且站点跳转到某个部分时,我希望菜单自动滑入隐藏状
我正在尝试让纯 CSS 下拉菜单正常工作。它在很大程度上确实有效,除了其他内容似乎显示出来但我不知道为什么。 http://jsfiddle.net/uQveP/4/ 有人可以告诉我我做错了什么吗?
这个问题在这里已经有了答案: What is a "callback" in C and how are they implemented? (9 个回答) 关闭 8 年前。 我正在以这种方式实现回
我想在不使用 Javascript 或任何其他语言的情况下,使用 HTML 和 CSS 创建一个 Page Back Button。我想用纯 HTML 和 CSS 来完成。 我进行了搜索,但每次代码中
我对序言很陌生。据我所知,Pure Prolog 仅限于 Horn 子句。 这是一个非常简单的序言程序 - % student( Snr , FirstName , LastName ,
我想在加载数据时对容器使用以下加载指示器。 问题是, slider 具有固定的宽度和高度(300 像素和 300 像素),但我希望它能够动态适应容器。当我尝试添加宽度时:140px;和高度:140px
当内容超过可用宽度时,我需要启用滚动阴影。这是我试图用纯 css(没有 JS)来实现的。我遇到了很多文章,可以使用 css 多背景和背景附件来实现。如果内容是文本类型,则可以使用下面的 jsfilld
我正在编写一个上古卷轴在线插件,它由一个名为 Havok Script 的轻微修改的 Lua 5.1 引擎支持。 .这个Lua环境不允许访问os , io , package , debug模块或任何
我自己尝试过将 Arduino 库编译成他们自己的独立库并链接到 Eclipse 中的一个项目,但在此过程中遇到了一些问题。 是否有关于如何启动和运行的体面指南?我一直很难在网上找到一个真正有效的..
我在这里遇到了一些麻烦。我正在尝试使用本地存储创建一个待办事项列表,但我唯一要做的就是将列表项添加到本地存储并删除 所有项目 从本地存储中删除,但我无法从列表中删除单个 SELECTED 项目。有人可
我的问题很简单。考虑以下 CodePen .是否有可能仅使用 css 就可以获得相同的结果?换句话说,如果不使用 javascrip 如何做到这一点?非常感谢! Nachos are
我正在使用没有 jquery 的 angularjs,并尝试创建滚动事件监听器。 尝试过这种方法: $rootScope.$watch(function() { return $windo
我正在尝试使用纯 webgl 创建虚线。我知道这已经有一个问题,也许我很笨,但我不知道如何让它发挥作用。我理解这个概念,但我不知道如何在着色器中获取沿路径的距离。以前的答案有以下行: varying
我正在尝试用纯 JavaScript 制作工具提示,显示在 hover .就像 Stack Overflow 中将鼠标悬停在配置文件名称上的一个 div显示。 我尝试使用 onmouseover ,
我想要通过 AJAX 将监听器添加到新元素的想法: 例如,现在我有 hello world 我为每个 添加了一个监听器,但是当我通过 AJAX 加载新元素时,它没有监听器;我不完全确定问题是什么。
如果我错误地提出了这个问题,或者之前已经有人问过并回答过这个问题,我提前表示歉意。我的搜索发现了类似的基于 JQuery 和/或静态日期的问答,我正在寻找具有动态日期的纯 JavaScript 解决方
在 Real World Haskell, Chapter 28, Software transactional memory ,开发了一个并发的网络链接检查器。它获取网页中的所有链接,并使用 HEA
我正在尝试取消 jQuery-fy 一个聪明的 piece of code ,但有点太聪明了。 目标是simple 。将图像从桌面拖动到浏览器。 在这次 unjQueryfication 过程中,我发
如何重新创建 jQuery end() $('#id') .find('.class') .css('font',f) .end() .find('.seven') .css(b,'red') 我有什
我是一名优秀的程序员,十分优秀!