Javascript 将鼠标悬停在iframe上后，不会激发文档上的Mouseup事件

我试图让一个div拆分器在拖动拆分器时调整两个div的大小。 我正试图通过mousedown、mousemove和mouseup事件来实现这一点。在我添加youtube iframe之前，它就像一个符咒。 一旦我将鼠标悬停在iframe上，

$（document）

的mouseup事件就不会被触发，我猜它是由iframe执行的。 我有一份工作

---

在本例中，mouseup事件将一直触发，直到您的鼠标移动到iframe上。

这里有一个解决方法，虽然很难看，但应该可以工作，当拖动鼠标时，在iframe顶部放置一个z索引较高的不可见div，当拖动停止时，您将其移除（或设置较低的z索引以将其移动到iframe下）。此div将捕获您的鼠标事件，而不是iframe。

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

HTML

JS

这就是你可以做到的：
1） 将#拖动元素的Z索引设置为高于iFrame（如99）。
2） 鼠标向下事件时，将#拖动的高度设置为100%，以便覆盖iFrame。
3） 现在mouseup事件将在iFrame上工作。鼠标悬停事件时，将#拖动的高度重置为初始高度。

---

4） 在将“高度”设置为100%时，一定要注意拖动边框/颜色，以免其覆盖整个屏幕

在mousemove事件期间，您可以将指针

指针事件：无
样式应用于iframe。
您到底想要实现什么？当我在视频上拖动分隔符时，页面的行为应该是什么？我想调整包含youtube视频的可拖动分隔符的a div的大小，因此该div应该调整大小。但是，如果在iframe的顶部，mouseup事件将丢失，并且无法停止调整大小的过程。基本上，拆分器会粘附在光标上
<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>

#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;
}

$("#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();
    });
});