Empêcher un élément de capturer & # 8220; capturer & # 8221; la souris en utilisant jQuery?

Question

J'essaie de redimensionner un objet incorporé. Le problème est que lorsque la souris survole l’objet, elle prend le "contrôle". de la souris, engloutissant les événements de mouvement. Le résultat étant que vous pouvez développer la div contenant l'objet, mais lorsque vous essayez de le réduire, le redimensionnement s'interrompt si la souris entre dans la zone de l'objet.

Actuellement, je cache l'objet en me déplaçant. Je me demande s'il existe un moyen d'empêcher simplement l'objet de capturer la souris. Peut-être superposez-vous un autre élément empêchant les événements de la souris d’atteindre l’objet incorporé?

l'utilisation d'images fantômes sur le redimensionnement ne fonctionne pas pour les objets incorporés, d'ailleurs.

Ajouter une prime, car je n'arrive pas à faire en sorte que cela fonctionne. Pour collecter, procédez comme suit:

Fournissez une page Web avec un fichier PDF incorporé, centrée sur la page. Le pdf ne peut pas prendre la page entière; faire sa largeur / hauteur 50% de la largeur de la fenêtre du navigateur ou quelque chose.

Utilisez jQuery 1.2.6 pour ajouter un redimensionnement de chaque côté et de chaque coin du fichier PDF.

Le pdf NE DOIT PAS CAPTURER LA SOURIS et arrêter de glisser lorsque vous réduisez le PDF. Cela signifie que lorsque je clique sur le bord du fichier PDF et que je glisse, lorsque la souris entre dans la zone d'affichage du fichier PDF, l'opération de redimensionnement se poursuit.

Cela doit fonctionner dans IE 7. Les hacks CSS sont corrects (si gte ie7 ou quoi que ce soit).

Hmmm ... je pense que cela pourrait être un problème avec 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>

Cela ne fonctionne pas. Lorsque votre souris s’immisce dans l’iframe, l’opération de redimensionnement s’arrête.

Il y a de bonnes réponses. si la prime s'épuise avant que je puisse me permettre de toutes les contrôler, je rétablirai la prime (mêmes 150 points).

Answer 1

Eh bien, je suis absolument incapable de trouver un exemple de visionneuse de document XPS ou quoi, mais j'ai pu trouver cet exemple de travail . Il n’utilise pas l’idée de superposition, mais c’est un pdf que vous pouvez redimensionner ...

modifier , le paramètre wmode qui a fonctionné sans superposition est défini sur transparent . Je ne connais pas vraiment les détails, mais ça a bien joué sur IE7. Fonctionne également sur Firefox, Chrome, Safari et Opera.

nouvelle modification éprouve de sérieuses difficultés à le faire fonctionner avec les cadres. Certaines informations que j'ai trouvées ne sont pas très encourageantes. Est-il impossible de l'avoir avec un < objet > ? Ou un < objet > dans l'iframe?

Answer 2

Je répondrais en superposition, mais fournirai le code actuel: P

Je l'appelle "suiveur". au lieu de superposer et est utilisé dans mon plug-in ThreeSixty pour jQuery (un code source simple fourni, vous comprendrez ce qui se passe avec la division "suiveur"

http://www.mathieusavard.info/threesixty

Answer 3

Superposition.

Un mot répond interdit, cette phrase sans verbe.

Answer 4

Peut-être que SmartLook est une alternative. C'est comme ces scripts lightbox mais pour un contenu incorporé tel que pdfs.

Answer 5

Voici ce qui fonctionne pour moi, même s’il cache l’iframe lors du redimensionnement. Est-ce un problème pour vous?

$(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

Avec IE, vous pouvez appeler setCapture () / releaseCapture (). Cela a très bien fonctionné avec les iframes pour moi.

Avec Firefox - superposition transparente, comme déjà suggéré.

Answer 7

Merci au nouveau " Activité récente " de StackOverflow fonction, j'ai vu que vous m'avez demandé de fournir un exemple de code. Je n’ai fait que des tests mineurs (je ne parviens pas à insérer votre code dans le fichier PDF dans IE, il est probable qu’il nécessite un plug-in PDF, que je n’ai pas installé), ce qui risque de ne pas fonctionner. Mais c’est un début.

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