在javascript中仅将某些事件传递给父节点_Javascript_D3.js

在javascript中仅将某些事件传递给父节点

javascript d3.js

在javascript中仅将某些事件传递给父节点,javascript,d3.js,Javascript,D3.js,如果我有两个绝对定位的元素，并且我想忽略上一个元素上的事件，以便它们由下一个元素处理，那么我可以将上一个元素的样式设置为指针事件：none。有没有办法只捕获一些事件（mousedown、mouseup）并传递其他事件（鼠标滚轮）下面是一个带有SVG和div的示例：我希望能够单击svg并触发click事件。同时，我想滚动svg并启动div wheel.zoom事件。这可能吗 HTML CSS 你想要这样的东西：？是的，没错！但是，在将事件处理程序保留在div上而不是将其放在主体上时，是否可以

如果我有两个绝对定位的元素，并且我想忽略上一个元素上的事件，以便它们由下一个元素处理，那么我可以将上一个元素的样式设置为

指针事件：none

。有没有办法只捕获一些事件（mousedown、mouseup）并传递其他事件（鼠标滚轮）

下面是一个带有SVG和div的示例：

我希望能够单击svg并触发

click

事件。同时，我想滚动svg并启动

div wheel.zoom

事件。这可能吗

HTML

CSS

你想要这样的东西：？是的，没错！但是，在将事件处理程序保留在div上而不是将其放在主体上时，是否可以这样做呢？您可以在svg事件触发器内部的选择上使用

dispatch

，比如

.on（'wheel.zoom'，function（d）{d3.select（'.div'）.dispatch（'wheelinesvg'））

但我不熟悉d3，不知道如何使用real

轮子。zoom

@MirkoVukušIć：谢谢你的建议。这可能行得通，但是如果SVG下面有两个不同的div呢？然后我需要跟踪鼠标位置并将事件发送到相应的div。您想要这样的内容：？是的，没错！但是，在将事件处理程序保留在div上而不是将其放在主体上时，是否可以这样做呢？您可以在svg事件触发器内部的选择上使用

dispatch

，比如

.on（'wheel.zoom'，function（d）{d3.select（'.div'）.dispatch（'wheelinesvg'））

但我不熟悉d3，不知道如何使用real

轮子。zoom

@MirkoVukušIć：谢谢你的建议。这可能行得通，但是如果SVG下面有两个不同的div呢？然后我需要跟踪鼠标位置并将事件发送到相应的div。

  <body>
    <div class="div">
    </div>
    <svg width=400 height=200>
    </svg>
  </body>
  <script>

  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.min.js"></script>

d3.select("svg")
.on('click', function(d) { console.log('svg click'); })

d3.select('.div')
.on('wheel.zoom', function(d) { console.log('div mouse wheel')})

.div {

  position: absolute,
  width:400px;
  height:400px;
  background: yellow;
  opacity: 0.3;
}

svg {
  position: absolute;
  left: 0px;
  top: 0px;
  border: 1px solid black;
}