Question

我正在想象一个聊天对话，我在每个消息中附加一个表示消息长度的栏。界面的另一部分用于显示聊天中每个用户的统计信息。

目标：当用户将鼠标悬停在栏上时

突出显示栏（通过从灰色更改为其他颜色）
显示有关发送该消息的用户的数据

所以我想做两个鼠标悬停事件，一个用于突出显示条，另一个用于更改显示，但似乎每个元素只能附加一个鼠标悬停事件。我怎么会把这两件事都解雇？

// add highlighting event to each rectangle
rects.on('mouseover', function(thisData) {
    rects.filter(function(d) { return d['userId'] === thisData['userId']; })
         .style('fill', users[thisData['userId']]['color']);
});

// further down...

// change display when highlighting a rectangle
rects.on('mouseover', function(thisData) {
    display.text(thisData['message']); // just example code
});

Answer 1

您可以创建2个函数并在鼠标悬停事件中调用它们

rects.on('mouseover', function (thisData) {
    dosomething();
    dosomethingelse();
});

//define dosomething and dosomethingelse
function dosomething($var) {
    //sample code
}

function dosomethingelse() {

}

Answer 2

只需在一个鼠标悬停处理程序中执行所有逻辑。

rects.on('mouseover', function(thisData) {
    rects.filter(function(d) { return d['userId'] === thisData['userId']; })
        .style('fill', users[thisData['userId']]['color']);
    display.text(thisData['message']);
});

每个元素有多个鼠标悬停事件

2 个答案: