将鼠标悬停在 iframe 上后不会触发文档上的 Mouseup 事件答案

【问题标题】：Mouseup event on document is not fired after hovering over iframe将鼠标悬停在 iframe 上后不会触发文档上的 Mouseup 事件
【发布时间】：2015-10-01 10:39:58
【问题描述】：

我试图让一个 div 拆分器在我拖动拆分器时调整两个 div 的大小。我正在尝试使用 mousedown、mousemove 和 mouseup 事件来做到这一点。在我添加我的 youtube iframe 之前，它就像一个魅力。一旦我将鼠标悬停在 iframe 上，$(document) 的 mouseup 事件就不会被触发，我猜它是由 iframe 占用的。我有一个工作的example in jsfiddle。

在示例中，mouseup 事件被触发，直到您的鼠标移到 iframe 上。

【问题讨论】：

您到底想达到什么目标？拖动视频上的分隔线后，页面的行为应该是什么？
我想调整一个 div 的大小，该 div 包含一个带有可拖动拆分器的 youtube 视频，因此 div 应该调整大小。但是，如果您继续使用 iframe，则 mouseup 事件将丢失，并且您无法停止调整大小的过程。基本上分离器会粘在你的光标上

标签： javascript jquery iframe dom-events

【解决方案1】：

这是一个变通的方法，丑陋但应该可以工作，同时拖动鼠标在 iframe 顶部放置一个具有更高 z-index 的不可见 div，当拖动停止时将其删除（或设置较低的 z-index 移动它在 iframe 下）。这个 div 将捕获您的鼠标事件而不是 iframe。

【讨论】：

【解决方案2】：

您可以在 mousemove 事件期间将指针 pointer-events: none 样式应用于 iframe。

【讨论】：

【解决方案3】：

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

see the working example in 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;
}

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

【讨论】：

【解决方案4】：

你可以这样做：
1) 将#drag 元素的 Z-index 设置为高于 iFrame，例如 99。
2) 在 mousedown 事件中，将 #drag 的高度设置为 100%，以便覆盖 iFrame。
3) 现在 mouseup 事件将在 iFrame 上起作用。在 mouseup 事件中，将 #drag 的高度重置为初始高度。
4) 在将高度设置为 100% 时注意#drag 边框/颜色，以免它覆盖在整个屏幕中。

【讨论】：