个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我在同一级别的div中定义了一个事件，但是我无法在多个不同的div重叠区域之间触发带有div的事件，只是触发了其中一个，如何通过重叠区域触发这些同级别的div事件？
像这样的示例代码
function Triggered(e){
console.log(event.target.id);//
} .S{
position: absolute;
width: 99px;
height: 99px;
opacity: .7;
}<body>
<div id="1" style="background-color:blue;left: 50%;top:50%" onclick="Triggered()" class="S"></div>
<div id="2" style="background-color:red;left: 50%;top:50%;transform: translate(-25%,-50%);" onclick="Triggered()" class="S"></div>
<div id="3" style="background-color:green;left: 50%;top:50%;transform: translate(-50px,0);" onclick="Triggered()" class="S"></div>
</body>最佳答案
如果我理解正确，您想检测三个 div 的点击事件，即使它们相互重叠。由于您的标签是在同一级别定义的，因此您不能像使用嵌套标签那样使用事件冒泡或捕获来处理不同级别的点击。
当用户点击时，尝试调用函数document.elementsFromPoint(x, y)获取鼠标指针下方的所有元素。
function Triggered(e) {
var clickedElements = [];
document.elementsFromPoint(event.clientX, event.clientY).forEach(function(element) {
if (element.classList.contains('S')) {
clickedElements.push(element.id);
}
});
console.log(clickedElements);
}.S {
position: absolute;
width: 99px;
height: 99px;
opacity: .7;
}<div onclick="Triggered()">
<div id="blue" style="background-color:blue;left: 50%;top:15%" class="S"></div>
<div id="red" style="background-color:red;left: 50%;top:15%;transform: translate(-25%,-50%);" class="S"></div>
<div id="green" style="background-color:green;left: 50%;top:15%;transform: translate(-50px,0);" class="S"></div>
</div>关于javascript - 如何在同级多div重叠区域触发多事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66882840/
27
4
0
我正在尝试使此 OSX 代码(golfed 以便于讨论)在 Ubuntu Linux 上运行。 cat >main.c #include #include void provided_by_ma
带有 .next() jquery 方法的小选择器让我发疯。 故事是这样的，我在表行上使用 Bootstrap 过滤器和 jquery。当过滤器执行时，它会将显示样式属性更改为 table-row，如
无法理解为什么此代码将 DIV 元素的颜色更改为蓝色，但不更改 SPAN 元素的颜色。有什么想法吗？ $(document).ready(function(){ $
这个问题在这里已经有了答案: How can I target a specific group of siblings in a flat hierarchy? (1 个回答) 关闭 6 年前。
请看here ，左侧的菜单应该在复选框选中的属性上滑入和滑出，但我的 CSS 不工作，任何人都可以帮助我。在我的代码菜单中，当前设置为 left:-240px，因为它应该滑入 left:0 选中复选框
我正在创建的这个系统遇到了问题。我总共有四个兄弟 div 容器。它们在普通桌面 View 中是这样的: 蓝红蓝红 这适用于 2/3 视口(viewport)以将 background-color 显示
使用 UITabBar，我有 4 个同级 View (每个选项卡项目一个)。加载应用程序时，第一个选项卡项目和 View 可见。第一个 View 有一个发布 NSNotification 的 IBAc
这个问题已经有答案了: Self-references in object literals / initializers (31 个回答) 已关闭 9 年前。 我有一个json结构如下:
我有多个带有标题、描述和号召性用语的产品。每个的字数没有规定。我正在使用 flexbox 来展示这些产品，这样每个元素的容器高度相等，并且可以轻松地清除到下一行，而不必弄乱第 nth-child。 我
我正在努力解决 IE7 问题。我希望我的兄弟 div 与其 sibling 的宽度相同。第一个 sibling 充当标题，而其他 sibling 有一定的尺寸。我可以使用一些建议。 http://js
我正在创建 3 行，每行有 4 列。但我想要实现的是，当 1 调整一行中任何列的大小时，其余列应根据行的总剩余宽度调整大小。假设如果行的总宽度为 100%，并且如果我将第一列的大小调整 60%，则剩余
到目前为止，我有以下cinoptions: cino= cino+=:0 cino+=g0 cino+=p0 cino+=(0 cino+={0 cino+=l1 cino+=t0 cino+=u2
如果我没有解释清楚，请提前道歉。我会尽力澄清我正在尝试做的事情。事不宜迟...假设您在页面上有一系列数字(仅由一个空格分隔)，其中括号表示您所在的当前页面。 在页面上看起来是这样的: [1] 2 3
我的 parent 中有两个 sibling ，并且 sibling 的数据正在更新，数据已更新，但是 ngOnInit(){} 未调用。 https://stackblitz.com/edit/an
我正在创建一个可滑动的菜单，它可以正常工作，但有一个方面除外。我希望菜单始终具有 100% 的高度……无论用户在页面上向下滚动多远。但是，每当我将其设置为 height: 100%; 时，菜单都不会滑
first-child last-child first-child-1 last-chi
我想显示一个评论列表以及每个评论的评论列表等等: 这是我的 HTML 代码: Titre d'un commentaire statique Qui cum ven
我进行了彻底的搜索，但没有找到任何关于如何查询和检索多个 XML 同级的值的示例或指导。 有很多关于如何检索单个兄弟值的示例。 例如，给出以下 XML 片段: 800000 80000
这个问题已经有答案了: Is there a "previous sibling" selector? (33 个回答) 已关闭 7 年前。 在 CSS 中，如果同级元素位于输出中的上方(HTML 中
console.log((this).sibling('.advanceOptWrap')); 以上代码返回 Uncaught TypeError: $(...).sibling is not a f
我是一名优秀的程序员,十分优秀！