- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试修复我正在处理的一些事件代码。在这种特殊情况下,我需要能够订阅 svg:circle
上的 click
事件。但是,还需要在 mousedown
上将圆圈移动到 z-index 的顶部,以便可以将元素拖动到其他元素的顶部。
这样做的方法是将元素从 DOM 中取出,然后使用我在 http://bl.ocks.org/eesur/4e0a69d57d3bfc8a82c2 中使用的辅助函数将其重新插入到正确的位置。 .这样做的问题是事件链似乎已经中断,将元素从 dom 中移除,从而阻止了 click
事件的触发。
我想知道是否有人可以想出更好的方法来确保 click
正确触发,但仍允许在拖动生命周期中某处更改 z-index?
这个小例子展示了 z-index 是如何变化的,但是点击事件并没有在控制台中触发。一旦元素位于顶部,再次点击该元素就会正确触发点击。
d3.selectAll("circle")
.on("mousedown", function() {
d3.select(this).moveToFront();
})
.on("click", function() {
var fill = d3.select(this).style("fill");
console.log("You clicked on : " + fill);
});
d3.selection.prototype.moveToFront = function() {
return this.each(function() {
this.parentNode.appendChild(this);
});
};
.red {
fill: red;
}
.blue {
fill: blue;
}
.green {
fill: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.min.js"></script>
<svg width="600" height="600">
<circle class="red" cx="50" cy="50" r="50" />
<circle class="blue" cx="100" cy="100" r="50" />
<circle class="green" cx="150" cy="150" r="50" />
</svg>
最佳答案
我想出了一个有点古怪的想法,这个想法似乎可行,但如果 DOM 中有很多元素,我对性能有点担心。
这个想法本质上是,不是将选择(在 mousedown
上)移动到顶部,而是移动其他所有内容(相同类型,在本例中为 svg:circle
) 在被鼠标按下的元素后面。
d3.selectAll("circle")
.on("mousedown", function() {
var that = this;
d3.select(this.parentNode)
.selectAll("circle")
.filter(function() { return this !== that; })
.moveBehind(that);
})
.on("click", function() {
var fill = d3.select(this).style("fill");
console.log("You clicked on : " + fill);
});
d3.selection.prototype.moveToFront = function() {
return this.each(function() {
this.parentNode.appendChild(this);
});
};
d3.selection.prototype.moveBehind = function(element) {
return this.each(function() {
this.parentNode.insertBefore(this, element);
});
};
.red {
fill: red;
}
.blue {
fill: blue;
}
.green {
fill: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.min.js"></script>
<svg width="600" height="600">
<circle class="red" cx="50" cy="50" r="50" />
<circle class="blue" cx="100" cy="100" r="50" />
<circle class="green" cx="150" cy="150" r="50" />
</svg>
关于javascript - 将元素移到前面而不中断事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39446325/
我有一个 jqgrid,在设置多重检查时,我在第一列上获得复选框,我希望该复选框列成为最后一列。 我没有找到任何选项,因此我正在编写一个自定义 jquery 方法来将 tr 的第一个 td 移动到最后
在编程类(class)中,我被要求创建一个 iCalendar 应用程序的副本。我正在使用 JAVA 对其进行编码,并使用 JFrame 和 JPanel 对其进行绘制。这是我的问题的 SSCCEE:
想把我的 snackbar 移到 bottomnavigationview 上面
我正在用 Objective-C 创建一个聊天应用程序。我的对话面板有两个项目,文本字段和将显示消息的表格。我正在为文本字段及其按钮使用 UIView,此 View 位于屏幕底部。每当我开始打字时,键
该方法用于选择User和TargetUser之间的 Action 数,例如就在两个用户之间。此方法的结果值取决于 GetTotalOfPossibleActions() 动态返回值(每个用户都有自己的
我有一个关于 owl api 用法的快速问题。 假设我有一个名为 Species 的类,它有一个哺乳动物子类,它有一个灵长类动物子类,它有一个人类子类。 物种 -> 哺乳动物 -> 灵长类动物 ->
我需要 eclipse 内容帮助将“java.lang.String”放置在以“string”开头的类型之上(见附图)。那可能吗? 请注意,对于此问题,“string”必须首先输入非大写的“s”。大写
我正在研究 pdf 页面上的收缩和收缩功能。我的捏合和平移(移动)工作正常,但是当用户连续移动缩放 View 时,缩放 View 超出了 super View 边界。是这样的: 我如何限制平移移动,以
一般 typescript 问题说我迭代一个我知道它的内容的数组并应用一个reduce来取回一个我知道类型的对象 例如: interface IMyInterface { a: number;
我有一个仪表板,您可以在其中使用小部件选择多个数据集。我使用 Python 中的 Altair 库从这些数据集中制作经典折线图,x 轴和 y 轴均从零开始。显示的数据是标准化数据,这意味着根据定义,所
首先,我没有这样做的经验。但是就像任何好的程序的开始一样,我有需要解决的问题,所以我愿意学习。 你们中的许多人可能已经熟悉 pdftk,它是处理各种 pdf 相关任务的便捷实用程序。据我所知,这些功能
我是一名优秀的程序员,十分优秀!