如果按鈕位於 canvas 頂部並且鼠標進入按鈕，如何防止針對 Canvas 觸發 mouseenter/mouseleave 事件

Question

我們正在實施視頻通話應用程序。 並且用戶應該能夠使用鼠標在視頻上繪圖，當鼠標進入遠程視頻時，我們需要在視頻上顯示一個按鈕（當用戶單擊按鈕時斷開呼叫），當鼠標退出視頻時，按鈕需要即將被刪除。

為此，我們在 javascript 中動態創建以下元素

1. Video Element - 顯示視頻
2. Canvas - 透明 canvas 正好位於視頻元素的頂部，與視頻相同（因此用戶可以在視頻上繪制）
3. 按鈕 - 為 canvas 的“mouseenter”事件動態創建按鈕，並為 canvas 的“mouseleave”事件刪除按鈕。

順序將是這樣的。 視頻 -> 視頻頂部的 Canvas -> 鼠標進入 canvas 時 Canvas 頂部的按鈕。

鼠標進入 Canvas 時顯示按鈕並在鼠標離開 canvas 時移除按鈕工作正常。 但我面臨以下問題。

1. 當我在按鈕上移動鼠標時，為 Canvas 觸發了“mouseleave”事件，當我將鼠標移到按鈕外時，為 Canvas 觸發了“mouseenter”事件。 因此，當我在按鈕上移動鼠標時，該按鈕被不斷刪除和刪除（這是因為當我在按鈕上移動鼠標時，mouseleave 事件被觸發，並且在 mouseleave 事件處理程序中，我正在刪除按鈕。現在按鈕被刪除，並且 canvas 處於下，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 事件（技術上 canvas 的一部分就在按鈕下方，因此不應觸發這些事件），因為繪圖功能取決於 ZFCC790C72A8619 的 mouseleave 事件。

有人可以幫助我如何防止鼠標進入按鈕時觸發鼠標進入/離開事件。

添加

'pointer-events: none;' 

按鈕實現了所描述的行為，但是當我單擊按鈕時沒有觸發單擊事件。

Answer 1

添加“指針事件：無；” 到按鈕解決了問題。 但是當我點擊按鈕時，點擊事件沒有被觸發。

Answer 2

您不一定需要避免這些事件被觸發。 您可以為 mouseenter 使用標志：

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

當然，您需要使用 false 初始化這些標志。 按鈕上的 hover 應將buttonHovered設置為 true。 現在，如果canvas被標簽包圍，那么，您可以在canvas上為其周圍的標簽定義一個mouseenter並在開始時檢查canvasHovered的值並在結束時將canvasHovered設置為false ，而不是mouseleave 。