Question

我一直在使用 Angular 2 和 D3.js V4 编写应用程序。主要问题是当我将d3拖动事件和Angular @HostListener（'document：mousedown'）附加到元素时，第二个将不会为左鼠标调用按钮（但中间和正确确定）。但是如果评论拖拽事件 - 它会没问题。我用jQuery和D3写了一个简单的例子。有人能解释一下，发生了什么事吗？

JS Bin example

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>JS Bin</title>
    </head>
    <body>
        <svg width="200" height="200">
            <g>
                <rect transform="translate(10 10)"width="50" height="50" fill="black"></rect>
            </g>
        </svg>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
    </body>
</html>

JavaScript的：

$(document).on('mousedown', 'g', function(event) {
    console.log('mousedown delegation');
})

d3.select('g')
  .call(d3.drag()
        .on('start', () => {
            console.log('drag started')
        })
        .on('drag', () => {
            console.log('dragged')
        }))

Mousedown代表团不使用D3拖动

0 个答案: