悬停在iframe上后不会触发文档上的Mouseup事件

Mouseup event on document is not fired after hovering over iframe

本文关键字：文档 Mouseup 事件 iframe 悬停      更新时间：2023-09-26

我试图让一个div拆分器工作时，我拖动拆分器调整两个div的大小。我试图做到这一点与鼠标下降，鼠标移动和鼠标上升事件。在我添加我的youtube iframe之前，一切都很顺利。一旦我将鼠标悬停在iframe上，则不会触发$(document)的mouseup事件，我猜它是由iframe采取的。我在jsfiddle中有一个工作示例。

在这个例子中，mouseup事件被触发，直到你的鼠标移动到iframe上。

这里有一个工作，丑陋但应该工作，当拖动鼠标时，在iframe顶部放置一个具有更高z索引的不可见div，当拖动停止时将其删除(或设置较低的z索引以将其移动到iframe下)。这个div将捕捉鼠标事件，而不是iframe。

您可以在鼠标移动事件期间为iframe应用指针pointer-events: none样式

我发现阻止iframe吃掉mouseup事件的唯一方法是在拆分器上触发mousedown事件时隐藏iframe。这完全消除了问题，但我对这个答案不满意。

参见jsfiddle

中的工作示例HTML 

<div id="container">
    <div id="top">
        <iframe class="col-md-12" id="player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="200" height="100" src="https://www.youtube.com/embed/OnoNITE-CLc?        enablejsapi=1&amp;origin=http%3A%2F%2Flocalhost%3A8000"></iframe>
    </div>
    <div id="drag"></div>
    <div id="bottom"></div>
</div>
CSS 

#container {
    width:200px;
    height:500px;
}
#top {
    height: 50%;
    width: 100%;
    background-color: green;
}
#bottom {
    height: 50%;
    width: 100%;
    background-color: blue;
}
#drag {
    height:10px;
    width:100%;
    background-color: grey;
    cursor: row-resize;
}

JS 

$("#drag").mousedown( function (e) {
    $("#player").hide();
    $(document).mousemove( function (e) {
        newHeight = e.clientY
        $("#top").height(newHeight);
        $("#bottom").height($("#container").height() - newHeight);
        return false;
    });
    $(document).mouseup( function (e) {
        $("#player").show();
        $(document).unbind();
    });
});

你可以这样做:
1)设置#drag元素的Z-index高于iFrame，如99。
2)在mousedown事件设置#drag的高度为100%，这样它将覆盖iFrame。
3)现在mouseup事件将在iFrame上工作。在mouseup事件中将#drag的高度重置为初始高度。
4)注意#drag border/color，同时将高度设置为100%，这样它就不会覆盖在整个屏幕上。

相关文章：