Question

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

在示例中，鼠标事件将被触发，直到鼠标移动到iframe上。

Answer 1

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

Answer 2

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

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

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

Answer 4

你怎么做：
1）将#drag元素的Z-index设置为高于iFrame，如99 2）将#drag的mousedown事件集高度设置为100％，以便它覆盖iFrame。
3）现在mouseup事件将在iFrame上运行。在mouseup事件中，将#drag的高度重置为初始高度 4）在将高度设置为100％时，请注意#drag边框/颜色，以便它不会覆盖整个屏幕。

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

4 个答案: