如果按钮位于画布顶部并且鼠标进入按钮，如何防止画布触发mouseenter/mouseleave事件

Question

我们正在实现视频通话应用程序。用户应该能够使用鼠标在视频上绘制，当鼠标进入远程视频时，我们需要在视频上显示一个按钮（当用户单击按钮时断开呼叫），当鼠标退出视频时，需要删除该按钮。

为此，我们在javascript中动态创建以下元素

1. 视频元素-显示视频
2. Canvas-完全位于视频元素之上的透明画布，尺寸与视频相同（因此用户可以在视频上绘图）
3. 按钮-为画布的“鼠标输入”事件动态创建按钮并删除画布的“Mouseleave”事件的按钮。

订单是这样的。视频-

鼠标进入画布时显示按钮，鼠标离开画布时删除按钮工作正常。但是我面临以下问题。

1. 当我将鼠标移到按钮顶部时，将为画布触发“mouseleave”事件，当我将鼠标移到按钮外部时，将为画布触发“mouseenter”事件。因此，当我在按钮上移动鼠标时，按钮会被不断删除和移除（这是因为当我在按钮上移动鼠标时，会触发mouseleave事件，而在mouseleave事件处理程序中，我会删除按钮。现在，当按钮被移除，画布处于下方时，会触发mouseenter事件，我会在mouseenter事件处理程序中添加按钮）

下面是代码。

remoteVideo = document.createElement('video');
remoteVideo.setAttribute("id", "remoteVideo");
remoteVideos.appendChild(remoteVideo);
localCanvas = document.createElement('canvas');
localCanvas.setAttribute("id", "localCanvas");
remoteVideos.appendChild(localCanvas);

    $("#remoteVideo").on("loadedmetadata", () => {
        const remoteVideoEle = document.getElementById('remoteVideo');
        const localCanvasEle = document.getElementById('localCanvas');

        localCanvasEle.setAttribute('width', remoteVideoEle.offsetWidth);
        localCanvasEle.setAttribute('height', remoteVideoEle.offsetHeight);
        localCanvasEle.style.position = 'absolute';
        localCanvasEle.style.background = 'transparent';

        $('#localCanvas').on('mouseenter', (e) => {
           // DISPLAYING BUTTON HERE
           if(termBtn === undefined) {
               termBtn = document.createElement('button');
               termBtn.style.left = localCanvas.getBoundingClientRect().x + (localCanvas.getBoundingClientRect().width / 2) - 25 + 'px';
               termBtn.style.top = localCanvas.getBoundingClientRect().y + localCanvas.getBoundingClientRect().height - 65 + 'px';
               termBtn.classList.add("terminate_session_btn");
               remoteVideos.appendChild(termBtn);
           } else {
               $(".terminate_session_btn").show();
           }
        });

        $('#localCanvas').on('mouseleave', (e) => {
            console.log("mouse exited remote video");
            $(".terminate_session_btn").remove();
            termBtn = undefined;
        });
    });

我不想在鼠标位于按钮上方时为画布生成mouseenter和mouseleave事件（从技术上讲，画布的一部分就在按钮下方，因此不应触发这些事件），因为绘图功能取决于画布的mouseleave事件。

有人能帮助我如何防止鼠标进入/离开事件被触发时，鼠标进入按钮。

正在添加

'pointer-events: none;' 

到按钮实现了描述的行为，但是当我单击按钮时，单击事件没有被触发。

Answer 1

添加“指针事件：无；”按按钮解决了问题。但当我单击按钮时，没有触发click事件。

Answer 2

您不一定需要避免触发这些事件。您可以为鼠标输入使用标志：

    $('#localCanvas').on('mouseenter', (e) => {
        if (!buttonHovered) {
            //Your code
        }
        buttonHovered = false;
        canvasHovered = true;
    });

当然，您需要用false初始化这些标志。“悬停在”按钮应将“按钮悬停在”设置为“真”。现在，如果画布周围有一个标记，则可以为其周围的标记定义一个鼠标指针，并在开始时检查画布悬停的值，然后在结束时将画布悬停的值设置为false。