Question

我有一个svg元素，用户可以单击或双击。我想调度这两个事件，所以我使用这个方法：

svg.attr('class', 'country')
    .attr('fill', 'steelblue')
    .attr('d', path)
    .on('click', checkIfClickOrDoubleClick);

function checkIfClickOrDoubleClick(d, i) {
    if(dblclick_timer) {
        clearTimeout(dblclick_timer);
        dblclick_timer = false;
        console.log('double click on i =', i, '/ d =', d);
    } 
    else { 
        dblclick_timer = setTimeout(function() {
            dblclick_timer = false;
            console.log('single click on i=', i, '/ d =', d);
            // CREATE OTHER PATH ELEMENT
        }, 250)
    } 
}

问题在于，当用户单击SVG时，代码会创建用户可以单击或双击的其他路径元素。所以我有类似的东西：

function checkIfClickOrDoubleClick(d, i) {
    if(dblclick_timer) {
        clearTimeout(dblclick_timer);
        dblclick_timer = false;
        console.log('double click on i =', i, '/ d =', d);
    } 
    else { 
        dblclick_timer = setTimeout(function() {
            dblclick_timer = false;
            console.log('single click on i=', i, '/ d =', d);
            // CREATE OTHER PATH ELEMENT
            svg.selectAll(null)
                .data(features)
                .enter().append('path')
                .attr('fill', function(r, i) { 
                    return 'tomato'; // r are the regions, i are the indices of regions
                })
                .attr('d', path)
                .on('click', checkIfClickOrDoubleClick);
        }, 250)
    } 
}

如您所见，我必须检查是否使用了点击或双击。总的来说，我有4种不同的互动。有没有办法将参数传递给checkIfClickOrDoubleClick()所以我可以区分我在哪种情况下？否则我想创建另一种方法checkIfClickOrDoubleClick2，但我不认为这是最好的解决方案。

Answer 1

您可以在里面使用switch语句创建一个事件处理程序。要查看触发的内容，请检查处理程序中的 event.type （在您的案例事件中为d3.event）。要使元素使用 this 或 event.currentTarget 。

如果您检测到dblclick并且不想调用click case，请在元素本身上添加一个属性，如this._dblclicked或event.currentTarget._dblclicked，然后在单击情况下，如果您在时间窗口内检测到属性，然后退出。

将参数传递给函数

1 个答案: