要素が＆＃8220;キャプチャすることを防ぐ＆＃8221;マウスはjQueryを使用していますか？

StackOverflow https://stackoverflow.com/questions/175892

質問

埋め込みオブジェクトのサイズを変更しようとしています。問題は、オブジェクトの上にマウスを移動すると、「制御」が必要になることです。マウスの動きイベントを飲み込みます。その結果、オブジェクトを含むdivを拡大できますが、縮小しようとすると、マウスがオブジェクトの領域に入ると、サイズ変更が停止します。

現在、移動中はオブジェクトを非表示にします。オブジェクトがマウスをキャプチャするのを防ぐ方法があるかどうか疑問に思っています。おそらく、その上に別の要素をオーバーレイして、マウスイベントが埋め込みオブジェクトに到達しないようにしますか？

リサイズでのゴーストの使用は、埋め込みオブジェクトでは機能しません。

賞金を追加します。これを機能させることはできません。収集するには、次の手順を実行します。

ページの中央にPDFが埋め込まれたWebページを提供します。 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ポイント）。

役に立ちましたか？

解決

まあ、XPS Document Viewerのサンプルなどはまったく見つかりませんでしたが、 この作業サンプル 。オーバーレイアイデアは使用しませんが、サイズを変更できるPDFです...

編集オーバーレイなしでこの作業を行ったのは、 transparent に設定された wmode パラメーターでした。私は詳細にあまり詳しくありませんが、IE7でうまく再生できました。 Firefox、Chrome、Safari、Operaでも動作します。

新しい編集がフレームで動作するようにするのに深刻な問題があります。私が見つけたいくつかの情報はあまり励みになりません。 ＆lt; object＆gt; を持つことは不可能ですか？または、iframe内の＆lt; object＆gt; ？

他のヒント

オーバーレイに答えますが、実際のコードを提供します：P

「フォロワー」と呼びますオーバーレイの代わりに、jQuery用のThreeSixtyプラグインで使用されます（提供される単純なソースコードは、「フォロワー」divで何が起こるかを理解できます。

http://www.mathieusavard.info/threesixty

オーバーレイ。

1つの単語の回答は禁止されています。この文には動詞はありません。

おそらく SmartLook が代替手段です。ライトボックススクリプトに似ていますが、pdfなどの埋め込みコンテンツ用です。

これは私にとって有効なものですが、サイズ変更中に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(); }
    });
});

IEでは、setCapture（）/ releaseCapture（）を呼び出すことができ、iframeでうまく機能しました。

Firefoxで-既に提案されている透明オーバーレイ。

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>

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();
        }
    });
});
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top