link管理
链接快照平台
- 输入网页链接，自动生成快照
- 标签化管理网页链接
相关文章推荐
|
沉稳的消防车 · Creating a 300dpi ...· 1 周前 · |
|
|
宽容的黑框眼镜 · EU solidarity with ...· 2 月前 · |
|
|
千杯不醉的甘蔗 · 王鹏清华附中 - 图片搜索· 3 月前 · |
|
|
直爽的黄花菜 · typescript ...· 4 月前 · |
|
|
有腹肌的警车 · kindle 安卓 ...· 4 月前 · |
|
|
重情义的豌豆 · 走进雅文邑的精彩世界_尚品频道_新浪网· 6 月前 · |
svg元素能触发svg元素的点击事件吗？
问
svg元素能触发svg元素的点击事件吗？
EN
EN
Stack Overflow用户
提问于
2020-06-08 19:36:07
回答 2
查看 970
关注 0
票数 1
这里有个问题。
我想知道是否有可能触发元素的“单击”事件(路径、圆圈、.)如果他们覆盖鼠标坐标的话？最好在打字稿和使用d3.js库。
例如，考虑有两个圆圈(z位置上的一个小圆圈)，这两个圆圈在点击时都会显示一个消息。我想如果我点击里面的小圆圈，它的信息出现，然后更大的圆圈的信息也出现。
下面是我的示例 编辑的HTML代码: D3 的更改版本
代码语言：
javascript
复制
<!DOCTYPE html>
<style>
circle { fill: lightgreen; stroke: #000; }
</style>
<script src="https://d3js.org/d3.v5.min.js"></script>下面是相关的javascript：
代码语言：
javascript
复制
var svg = d3.select("body").append("svg")
.style("float", "left")
.attr("width", 480)
.attr("height", 480)
.attr('pointer-events', 'all')
.on("click", log("SVG"));
svg.append("circle")
.attr('pointer-events', 'all')
.attr("cx", 240)
.attr("cy", 240)
.attr("r", 200)
.on("click", log("OUTER"));
svg.append("circle")
.attr('pointer-event', 'all')
.attr("cx", 240)
.attr("cy", 240)
.attr("r", 100)
.on("click", log("INNER"));
var div = d3.select("body").append("div")
.style("float", "left");
function log(message) {
return function() {
div.append("p")
.text(message)
.style("background", "#ff0")
.transition()
.duration(2500)
.style("opacity", 1e-6)
.remove();
}
使用此代码，单击大圆圈将显示
、外部
和
SVG
消息。单击这个小圆圈显示
内部
和
SVG
消息，但是我想要序列
内部
、
外部
和
SVG
E 217
。
编辑:纠正了单词“传播”的误用
我将元素的‘指针-事件’属性放置到'all‘。我知道这使他们“不通过”，但我希望能够触发他们的事件，也触发他们下的元素事件。
或者，是否有任何很好的方法来获得覆盖给定坐标 X,Y 的svg元素列表，以便可以手动触发它们各自的单击事件？
谢谢你的帮助。
EN
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-06-08 23:20:16
首先，该解决方案使用的是 D3 v5 ，而不是您在HTML中引用的D3 v2 (已有9年历史)。
回到你的问题，你说：
I希望能够触发它们的事件并传播到它们下面的元素，直到触发SVG本身为止。
这不是传播的意思。冒泡意味着上升到DOM树中，但是这些圆圈并不是父/子，它们只是兄弟姐妹。因此，您想要的与传播无关，所以我们需要一种不同的方法。
这里我建议的方法使用
elementFromPoint
，将所有元素都放在您单击的坐标下，并结合
d3.dispatch
来分配单击(我找到了
getAllElements
函数
here
，并对其进行了修改以用于D3)。最后，我需要
clicked
标志，因为指针事件设置为
none
的元素被
elementFromPoint
忽略(顺便说一句，它是
pointer-events
，而不是
pointer-event
)。
下面是演示：
代码语言：
javascript
复制
let clicked;
var svg = d3.select("body").append("svg")
.style("float", "left")
.attr("width", 480)
.attr("height", 480)
.attr('pointer-event', 'all');
svg.append("circle")
.attr('pointer-event', 'all')
.attr("cx", 240)
.attr("cy", 240)
.attr("r", 200)
.on("click", function() {
if (!clicked) return;
log("OUTER")
svg.append("circle")
.attr('pointer-event', 'all')
.attr("cx", 240)
.attr("cy", 240)
.attr("r", 100)
.on("click", function() {
if (!clicked) return;
log("INNER")
var div = d3.select("body").append("div")
.style("float", "left");
function log(message) {
div.append("p")
.text(message)
.style("background", "#ff0")
.transition()
.duration(2500)
.style("opacity", 1e-6)
.remove();
d3.select("svg").on("click", function() {
clicked = true;
getAllElements(...d3.mouse(this));
log("SVG")
clicked = false;
function getAllElements(x, y) {
const elements = [];
let thisElement = document.elementFromPoint(x, y);
while (thisElement && thisElement.nearestViewportElement) {
elements.push(thisElement);
d3.select(thisElement).style("display", "none");
thisElement = document.elementFromPoint(x, y);
elements.forEach(function(elm) {
d3.select(elm).style("display", null)
.dispatch("click");
})
代码语言：
javascript
复制
<!DOCTYPE html>
<style>
circle {
fill: lightgreen;
stroke: #000;