时间戳

首页 > 解决方案 > 如果按钮位于画布顶部并且鼠标进入按钮，如何防止为 Canvas 触发 mouseenter/mouseleave 事件

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

问题描述

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

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

  1. Video Element - 显示视频
  2. 画布 - 透明画布恰好位于视频元素顶部，与视频尺寸相同（因此用户可以在视频上绘制）
  3. 按钮 - 为画布的“mouseenter”事件动态创建按钮，并为画布的“mouseleave”事件删除按钮。

顺序将是这样的。视频 -> 视频顶部的画布 -> 鼠标进入画布时画布顶部的按钮。

当鼠标进入画布时显示按钮并在鼠标离开画布时移除按钮工作正常。但我面临以下问题。

  1. 当我在按钮上移动鼠标时，会为 Canvas 触发“mouseleave”事件，当我将鼠标移到按钮外时，会为 Canvas 触发“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;
        });
    });

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

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

添加

'pointer-events: none;'

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

标签： javascriptjquerycanvas

解决方案

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

推荐阅读