Question

我正在使用Zurb Foundation工具提示（http://foundation.zurb.com/docs/components/tooltips.html）。我想略微定制他们的行为。他们在源元素上使用mouseover事件监听器来创建工具提示（在第一次调用时），然后将其淡入。我正在尝试做的是让jQuery选择工具提示源的子集在页面上，只删除他们的鼠标悬停监听器，并绑定新的工具提示，让工具提示在那里停留一秒钟，然后在鼠标移开后消失。

这是棘手的部分。 Zurb如此绑定了听众：

$('body.off-canvas').on('mouseenter', '.has-tooltip', ...);

以下内容将按预期成功删除此侦听器：

$('body.off-canvas').off('mouseenter', '.has-tooltip');

但我只想删除其中一些元素的监听器，如下所示：

$('body.off-canvas').off('mouseenter', '.has-tooltip.my-custom-class');

事实证明，jQuery不会将此识别为更大的.has-tooltip元素集的“减法”，而是基本上说：“没有事件侦听器匹配这个精确的选择器，因此我什么都不做。”有没有人有一个好的解决方法？如果你自己创建原始的监听器，我发现了一些可行的，但这不是这种情况。

Answer 1

我认为，如果你想阻止那些＆＃34; mouseenter＆＃34;那么你可以阻止这些锚链接上的事件冒泡。函数应用于被触发的body元素。

使用JQUERY：

$(".has-tooltip.my-custom-class").on("mouseenter", function(event){
   event.stopPropagation();
   ....
   ....
});

希望它有所帮助。

Answer 2

我采取了不同的方法解决了这个问题。我以为我无法删除所有常规工具提示的默认Foundation事件，因为我需要Foundation仍然构建工具提示元素。解决方法很棘手，但它完成了工作。

我在页面加载时手动触发所有工具提示上的mouseenter事件，使用特殊的CSS类强制它们在初始化后保持不可见而不是淡入我必须在事件中模拟鼠标数据，因为Foundation依赖于它来初始定位工具提示。完成DOM修改后，我可以将侦听器添加到模拟默认行为的常规工具提示中，同时向自定义元素添加自定义侦听器。

// simulate and trigger default tooltip hover event to allow Foundation to create spans
$('body.off-canvas .has-tip').each(function(){
    var event = $.Event('mouseenter');

    var offset = $(this).offset();
    var position = $(this).position();

    event.clientX = offset.left;
    event.clientY = offset.top;
    //event.offsetX = ;
    //event.offsetY = ;
    event.pageX = offset.left;
    event.pageY = offset.top;
    event.screenX = offset.left;
    //event.screenY = ;
    $(this).trigger(event);
});
$('body.off-canvas .has-tip').trigger('mouseleave');

// remove default events
$('body.off-canvas').off('mouseenter', '.has-tip');
$('body.off-canvas').off('mouseleave', '.has-tip');

// restore normal tooltips to normal behavior
$('body.off-canvas').on('mouseenter', '.has-tip:not(.has-details)', function(){
    $('span.tooltip[data-selector="' + $(this).data('selector') + '"]').removeClass('force-visibility-hidden').fadeIn();
});
$('body.off-canvas').on('mouseleave', '.has-tip:not(.has-details)', function(){
    $('span.tooltip[data-selector="' + $(this).data('selector') + '"]').fadeOut();
});

// set up custom details tooltip listener
$('body.off-canvas').on('mouseenter', '.has-tip.has-details', function(e){
    ...
});

作为旁注，我还必须将整个内容包装在setTimeout(..., 200);中，以确保它在应用基础监听器后执行。

总而言之，这是我写过的更复杂的代码之一，但它就像一个魅力。

Answer 3

您可以使用 stopImmediatePropagation() 停止元素上的所有其他处理程序。由于处理程序是按添加顺序执行的，因此请确保在添加 Zurb 代码之前添加您的代码。以下是如何测试 my-custom-class 的示例：

$(function(){
    $('body.off-canvas').on('mouseenter', '.has-tooltip', function(event){
        if($(event.target).hasClass('my-custom-class')){
            event.stopImmediatePropagation();
        }
    });
});

从元素子集

3 个答案: