如何使用键盘侦听器在调用时触发工具提示

How can I use a keyboard listener to trigger a tooltip when called?

本文关键字：工具提示 调用 何使用 键盘 侦听器      更新时间：2023-09-26

我有一个简单的饼图。单击饼图楔形时，将显示该楔形的工具提示。

我正在尝试实现相同的功能，但在饼图之外的div 元素上。

场景：

  1. 专注于"Cat 1"div 并点击回车键的用户将显示 Cat 1 楔形的工具提示

  2. 专注于"Cat 2"div 并按回车键的用户将显示 Cat 2 楔形的工具提示

  3. 专注于"Cat 3"div 并按回车键的用户将显示 Cat 3 楔形的工具提示

我已经尝试了类似以下内容的内容：

function ShowTooltip() {
    d3.selectAll('.nvtooltip').each(function(){
        this.style.setProperty('display', 'block', 'important');
    });
};

但是如果你在 plunkr 中看到，这不会触发任何东西。如何使这些潜水触发其相应的工具提示？ 

$(document).keydown(function(event) {
    // Capture only if enter key is pressed and .myDiv has focus
    if (event.keyCode === 13 && $('.cat-count').is(':focus')) {
        console.log('do something');
        ShowTooltip();
    }   
});

当我们单击按钮时，我们需要触发饼图部分的相应事件才能显示工具提示。

看看我的 Plunk：http://plnkr.co/edit/GP9h6eEe4DE8MM9jXolc?p=preview（使用按钮）http://plnkr.co/edit/MM5nvJ?p=preview（使用div 元素）

        function TriggerEvent(eventName, pieSection, clientX, clientY) {
            var event = document.createEvent("MouseEvent");
            // possible values for eventName for our example are mouseover,mouseout
            event.initMouseEvent(eventName, true, true, window, 0, 0, 0, clientX, clientY);
            pieSection.dispatchEvent(event);
        }

在按钮单击上调用上述函数：

TriggerEvent("mouseover", pieSection.node(), offset.left, offset.top);
您只需将

keydown 事件的侦听器设置为所需的元素：

$('.myDiv').keydown(function(event) {
    if (event.keyCode === 13) {
        console.log('do something');
        ShowTooltip();
    }   
});

或者，您使用您的方法并检查activeElement是否是您想要的：

$(document).keydown(function(event) {
    // Capture only if enter key is pressed and .myDiv has focus
    if (event.keyCode === 13 && $(document.activeElement).is('.myDiv')) {
        console.log('do something');
        ShowTooltip();
    }   
});

编辑要显示工具箱，您需要操作隐藏工具箱元素的 CSS 属性。这些是：display: none;和opacity: 0。你可以用jQuery来做到这一点：

$('.toolbox').css('opacity', 1).css('display', 'block');

但是，我建议不要使用 jQuery 对 D3 工具箱进行这种操作。查看 D3 的文档，了解如何以编程方式显示工具箱。以下是 plunkr 中的更改： http://plnkr.co/edit/qNQfdpCMWXOypSqczXXi?p=preview

相关文章：