Désactiver la souris et des événements clés de la Div

J'ai plusieurs Html éléments à l'intérieur d'un div. Est-il possible de désactiver la souris et les principaux évènements de la Div(Pas pour les éléments individuels)? Les éléments sont générés automatiquement et sont à l'intérieur de plusieurs plages. Donc, je veux juste désactiver l'ensemble de la div, de sorte que rien ne peut être changé, mais readonly.

Afficher votre code HTML..
Comme je l'ai mentionné ci-dessus les éléments sont générés automatiquement. Je peux juste l'id de la div rien de plus.
Mais ne pouvez-vous pas montrer le prototype des éléments que vous générez?
ce sujet unbind fonction jquery?

OriginalL'auteur nebula | 2013-05-22

  1. 7

    Essayer avec .unbind() comme

    $('#my_div_id').unbind();

    il va supprimer tous les événements qui se joint à la div.Voir ce UNBIND

    Vous pouvez utiliser .mourir aussi comme

    $('#my_div_id').die();

    OriginalL'auteur Gautam3164

  2. 6

    Comme par jQuery docs, unbind méthode permet de supprimer un déjà-joint gestionnaire d'événement à partir des éléments. Ma compréhension est que vous voulez juste pour empêcher le navigateur par défaut des événements de déclenchement, au lieu de supprimer précédemment événements attachés.

    Il est un simple CSS solution pour elle, qui ne fonctionne pas sur IE10 et ci-dessous:

    #yourDiv {pointer-events:none;}

    Une solution à l'aide de jQuery serait l'ajout d'un événement à votre div, puis la prévention comportement par défaut de passe sur les événements de votre choix:

    $('#yourDiv').click(function(e){
    e.preventDefault();    
});

    Cliquez sur les événements doivent également travailler pour le clavier de l'accès aux cases à cocher et des boutons radio, mais dans le cas où vous avez besoin, par exemple, empêcher le texte en tapant sur un champ de saisie, il suffit d'ajouter les événements de clavier à la liste:

    $('#yourDiv').click(function(e){
    e.preventDefault();    
});
$('#yourDiv').keypress(function(e){
    e.preventDefault();
});

    Je suis en train de poster cette réponse, car elle pourrait aider d'autres personnes à la recherche pour des fonctionnalités similaires, mais je crois qu'il y a de meilleures façons de le faire sur votre cas. Vous pouvez exécuter une fonction pour définir vos éléments désactivé $('#yourDiv input').prop("disabled", true); après le chargement. Difficile à dire sans connaître le html.

    #yourDiv {pointeur-events:none;} n'est pas de travail en place à travers IE11
    Belle prise @JackFairfield. J'ai mis à jour la réponse en fonction de ce tableau - caniuse.com/#feat=pointer-events
    Ce n'est pas de désactiver les événements de clavier. Si vous souhaitez désactiver les événements de clavier, c'est parce que vous avez déjà auditeurs attachés. Si vous appliquez cette auditeur après ceux déjà fixés, les autres continuent de fonctionner, donc cela n'a aucun effet à tous en termes de désactivation des événements. L'annulation de l'action par défaut pour un événement n'est PAS la même chose que la désactivation des événements. Il est tout simplement pas. Si vous avez attaché cet écouteur premier, ou qu'il l'a attaché avec une priorité plus élevée que tous les autres événements, vous pouvez ensuite appeler stopImmediatePropagation, mais preventDefault est inutile pour ce problème.
    À l'aide de .on("click keypress") doit bloquer le clavier et la souris, et c'est plus court.

    OriginalL'auteur Hugo Silva

  3. 2

    Vous pouvez utiliser le unbind fonction jquery.

    $('#foo').unbind();

    ou si vous voulez désactiver certains événements vous pouvez l'utiliser comme:

     $('#foo').unbind('click');

    Aussi, vous pouvez prendre un coup d'oeil à jquery événement namespacing. Je pense que c'est probablement va être utile pour vous.

    OriginalL'auteur Tom Sarduy

  4. 1

    Je crois que vous pouvez lier un gestionnaire sur l'élément qui exécute event.stopImmediatePropagation()

    Aussi longtemps que cet événement se déclenche en premier, tous les autres ne feront pas le feu.

    Malheureusement, il est pas possible définir manuellement des cas prioritaires.
    Vous devez vous assurer que l'événement est défini en dernier dans la pile.

    Événement de priorité existe en ActionScript 3, qui souffle JavaScript loin, et existe depuis plus d'une décennie. AS3 l'occurrence d'InteractiveObject.mouseEnabled propriété fonctionne comme pointeur-events:none, mais en fait désactive tous les événements d'interaction de la souris et du clavier. L'impossibilité de désactiver les événements de clavier ou de la définition de l'événement de priorité en 2017 est un énorme échec de JavaScript. De toute façon, stopImmediatePropagation est la seule bonne réponse à ce qui empêche les événements de clavier de tir. help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/...

    OriginalL'auteur Maxim Kumpan

  5. 1

    Ici est un autre vieux truc.

    Afin d'éviter tout contact avec la souris sur votre div, placez un autre div de la même taille sur le dessus (avec un z-index) avec une opacité de 0 (ou l'équivalent pour les anciens navigateur).

    Vous déclenchez en changeant la propriété display none (par défaut) pour bloquer.
    Lorsque la div a un affichage à bloc, il sera sur le dessus de votre div et de faire un mur entre la souris et de votre div.

    Il pourrait ne pas être adaptée à votre page et css de l'architecture, mais si elle le fait, il est facile pour l'installation. 🙂

    OriginalL'auteur Antoine Mouquod

  6. 1

    Im en utilisant ce pour désactiver complètement sur pour tous de la fenêtre.
    Est une superposition transparente panneau avec un grand z-Index, avec cela, vous ne pouvez pas cliquer n'importe où.

    var $ventanaModal = $('<div id="pantallaTransparente" class="ip-container containerFondoModal zIndexAlto"></div>');

$('body').prepend($ventanaModal);

    Et voici le css de la classe:

    .pantallaTransparente {
background: transparent;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 99999999;
}

    OriginalL'auteur Mikel

  7. 1

    Peut être résolu par la CSS. Utilisez le code ci-dessous

    .div-element {
   pointer-events: none; //disable all the pointer events in div
}
.div-element * {
   pointer-events: auto; //enables all the pointer events in children elements of the div
}

    OriginalL'auteur sujithuix

  8. 0

    Cela a fonctionné comme je l'espérais:

    element.style {
   pointer-events: none;
}

    OriginalL'auteur nicpas