防止元素捕获＆＃8221;使用jQuery的鼠标？

Question

我正在尝试调整嵌入对象的大小。问题是当鼠标悬停在对象上时，它需要“控制”对象。鼠标，吞噬运动事件。结果是您可以展开包含对象的div，但是当您尝试缩小它时，如果鼠标进入对象区域，则调整大小将停止。

目前，我在移动时隐藏了对象。我想知道是否有办法阻止对象捕获鼠标。也许覆盖其上的另一个元素会阻止鼠标事件到达嵌入对象？

---

在调整大小上使用重影对嵌入对象不起作用，顺便说一句。

---

添加赏金，因为我似乎无法让这个工作。要收集，只需执行以下操作：

提供一个嵌入了PDF的网页，以页面为中心。 pdf不能占用整个页面;使其宽度/高度为浏览器窗口宽度的50％。

使用jQuery 1.2.6将大小调整添加到pdf的每个边角。

pdf不得捕捉鼠标并在缩小PDF时停止拖动。这意味着当我单击pdf的边缘并拖动时，当鼠标进入pdf的显示框时，调整大小操作将继续。

这必须在IE 7中有效。条件CSS（如果gte ie7或其他）黑客攻击都没问题。

---

嗯......我认为这可能是iframe的一个问题......

    <div style="text-align:center; padding-top:50px;">
    <div id="doc" style="width:384px;height:512px;">
    <iframe id="docFrame" style="width: 100%; height: 100%;"
 src='http://www.ready.gov/america/_downloads/sampleplan.pdf'>
    </iframe></div></div>
    <div id="data"></div>
    <script type="text/javascript">
        $(document).ready(function() {
        var obj = $('#docFrame');
            $('#doc').resizable({handles:'all', resize: function(e, ui) {
                $('#data').html(ui.size.width + 'x' + ui.size.height);
                obj.attr({width: ui.size.width, height: ui.size.height});
            }});
        });
    </script>

这不起作用。当鼠标偏离iframe时，调整大小操作将停止。

---

有一些好的答案;如果赏金耗尽之前我可以绕过审查他们所有我将恢复赏金（相同的150分）。

Answer 1

好吧，我完全无法找到XPS Document Viewer示例或诸如此类的东西，但我能够提出 此工作样本 。它没有使用叠加的想法，但它是一个可以调整大小的PDF ...

编辑使得没有叠加层工作的事情是将 wmode param设置为 transparent 。我对这些细节并不熟悉，但它让它在IE7上发挥得淋漓尽致。也适用于Firefox，Chrome，Safari和Opera。

新编辑在使用框架时遇到严重问题。我发现的一些信息并不十分令人鼓舞。是否无法使用＆lt; object＆gt; ？或iframe内的＆lt; object＆gt; ？

Answer 2

我会回答叠加，但会提供实际代码：P

我称之为“追随者”而不是覆盖，并在我的用于jQuery的ThreeSixty插件中使用（有点简单的源代码提供，你将理解阅读“跟随者”div发生的事情。

http://www.mathieusavard.info/threesixty

Answer 3

叠加。

一个单词回答被禁止，这句话没有动词。

Answer 4

也许 SmartLook 是另一种选择。它就像那些灯箱脚本，但适用于嵌入式内容，如pdfs。

Answer 5

这对我有用，但是在调整大小时会隐藏iframe。这对你来说是个问题吗？

$(document).ready(function() {
    var obj = $('#docFrame');
    $('#doc').resizable(
    { 
        handles: 'all', 
        resize: function(e, ui) {
            $('#data').html(ui.size.width + 'x' + ui.size.height);
            obj.attr({ width: ui.size.width, height: ui.size.height });
        },
        start: function(e, ui) { $('#docFrame').hide(); },
        stop: function(e, ui) { $('#docFrame').show(); }
    });
});

Answer 6

使用IE，您可以调用setCapture（）/ releaseCapture（），它对我来说非常适合iframe。

使用Firefox - 透明叠加层，如已建议的那样。

Answer 7

感谢StackOverflow的新“最近活动”功能，我看到你要我提供一个代码示例。我只进行了一些小测试（似乎无法让你的代码在IE中内联PDF，大概它需要一个PDF插件，我没有安装），所以这可能无法正常工作。但这是一个开始。

<div style="text-align: center; padding-top: 50px;">
    <div id="doc" style="width: 384px; height: 512px; position: relative;">
        <div id="overlay" style="position: absolute; top: -5px; left: -5px;
            padding: 5px; width: 100%; height: 100%; background: red;
            opacity: 0.5; z-index: 1; display: none;"></div>
        <iframe id="docFrame" style="width: 100%; height: 100%; position: relative; z-index: 0;"
            src='http://www.ready.gov/america/_downloads/sampleplan.pdf'></iframe>
    </div>
</div>
<div id="data"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var obj = $('#docFrame'), overlay = $('#overlay');
        $('#doc').resizable({
            handles: 'all',
            start: function() {
                overlay.show();
            },
            resize: function(e, ui) {
                $('#data').html(ui.size.width + 'x' + ui.size.height);
                obj.attr({
                    width: ui.size.width,
                    height: ui.size.height
                });
            },
            stop: function(e, ui) {
                overlay.hide();
            }
        });
    });
</script>

Answer 8

var dframe = $("#docFrame");

$(document).ready(function () {
    var b = dframe;
    $("#doc").e({
        b: "all",
        resize: function (c, a) {
            $("#data").html(a.size.width + "x" + a.size.height);
            object.attr({
                width: a.size.width,
                height: a.size.height
            });
        },
        start: function () {
            dframe.hide();
        },
        stop: function () {
            dframe.show();
        }
    });
});