Javascript - 父div中无意触发事件-Java 学习之路

这是我长期以来面临的一个问题 . 我已经尝试了我所知道的一切，但不知怎的，它仍然让我望而却步 .

我有一个APEX应用程序，我使用DIV元素创建了一个表（之前我使用的是HTML表，问题也出现在那里） . 这是我 table 的结构 .
HTML structure

我必须在这个表上包含鼠标交互，因此我已经绑定（使用jquery委托函数）所有单元格中的 mouseenter ， mousemove 和 mouseleave 事件 . 主表div上还有一个 mouseleave 事件，它会关闭一个弹出窗口，该弹出窗口显示在任何单元格div中的 mouseenter 上 . 所以总结一下事件处理程序：

细胞分裂：
mouseenter ：显示一个弹出式div并突出显示该单元格
mousemove ：激活弹出div以移动到新的鼠标指针位置
mouseleave ：删除单元格上的突出显示 . 现在无需隐藏弹出窗口，因为它将在鼠标移动到的下一个单元格中再次显示

主表div：
mouseleave ：最后隐藏弹出div，因为鼠标指针现在已经超出了表区域

问题：

有时，如图中箭头所示，在桌面区域内向右或向下移动鼠标时，主表div的 mouseleave 事件处理程序将触发 . 当我检查此事件的目标属性时，它显示该事件是由其中一个单元格div触发的 . 但我已经在单元格divs的mouseleave处理程序中包含了stopPropagation调用 . 当鼠标指针向左或向上移动时，看不到此行为 . （无法理解为什么 . 细胞div的小鼠离开但它没有传播）

此外，大多数情况下主表div的mouseleave事件不会触发，因此弹出窗口不会隐藏 . 这是主要问题 .

任何有关这方面的帮助将受到高度赞赏 . 我无法在jsfiddle上发布代码，因为只需要在小提琴上设置它就需要我很多工作 . 但是，如果要求，我会这样做 .

EDIT ：这是jsFiddle的简化设置 .

如果插入到jsFiddle的链接，这里是JS代码作为stackoverflow请求

// cell div event handlers
$('#mainTable').delegate('div.bit','mouseenter', function(e){
    // highlight the cell
    $(this).addClass('highlight');

  // show the details popup near the cell
    $('#detailsPopup').css({
        "left": e.pageX + 10,
        "top": e.pageY + 10,
        "position": "absolute"
    }).show();
});

$('#mainTable').delegate('div.bit','mousemove', function(e){
    // move the details popup
    $('#detailsPopup').animate({
            "top": e.pageY + 10,
            "left": e.pageX + 10
        }, {
            "duration": 15,
            "queue": false
        });
});

$('#mainTable').delegate('div.bit','mouseleave', function(e){
    // remove the highlight from the cell
    $(this).removeClass('highlight');
});

$('#mainTable').mouseleave(function(e){
    // mouse has left the table area. hide the details popup
    $('#detailsPopup').hide();
});

然而，在小提琴上，代码完全正常工作 .

提前致谢！

1 回答

0

也许你应该使用 mouseout 而不是 mouseleave ？ here您可以阅读有关这些事件之间差异的更多信息 .

回复于 2024-05-05T00:22:17+08:00

Javascript - 父div中无意触发事件

1 回答

相关问题