web-dev-qa-db-fra.com

Comment désactiver complètement tout clic de souris

Après que l'utilisateur a cliqué sur .... le bouton "se connecter" et d'autres événements, j'ai créé un script de chargement pour faire savoir aux utilisateurs qu'ils doivent attendre (jusqu'à ce que ajax réponde).

Comment puis-je désactiver tous les clics de souris (clic droit, clic gauche, double clic, clic du milieu, x clic), sur div id="doc"?
Je veux ajouter ce code à loading.js


HTML 

<html>
...
<body>
<div id="doc">
   <div id="content">
   ...
   <input type="button" value="Login" id="login" />
   ...
   </div id="content">
</div id="doc">
</body>
</html>



loading.js

function load_bar(x)
{
    if (x==0)
    {
    $(document.body).css( {"cursor": "default"} );
    $("body").css( {"cursor": "default"} );
    $("#loading").css("visibility", "hidden"); //modal window
//  $("#doc").....ENABLE all clicks (left/right/etc)
    }

    else if (x==1)
    {
    $(document.body).css( {"cursor": "wait"} );
    $("body").css( {"cursor": "wait"} );
    $("#loading").css( {"visibility": "visible"} ); //modal window
//  $("#doc").....DISABLE all clicks (left/right/etc)
    }

    else
    {
    return alert("Wrong argument!");
    }
}



jQuery

$(document).ready(function()
{
//AJAX
$("#login").click(function()
{
    load_bar(1); //DISABLE clicks and show load_bar
    $(":input").attr("disabled", true);


$.post( 
    ...
    function(data)
    {
    ...
    load_bar(0); //ENABLE clicks and hide load_bar
    ...
    } //END: if:else
}); //END:$.post
    ...
}); //END:ajax
}); //END:jQuery
javascriptjqueryonclickmouseevent
41
Omar

Vous pouvez superposer un grand, semi-transparent <div> qui prend tous les clics. Ajoutez simplement un nouveau <div> à <body> avec ce style:

.overlay {
    background-color: rgba(1, 1, 1, 0.7);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}
38
Ry-

Vous pouvez ajouter une règle css3 simple dans le corps ou dans une div spécifique, utilisez pointer-events: none; propriété.

49
Leonardo Salles

Pour désactiver tous les clics de souris

var event = $(document).click(function(e) {
    e.stopPropagation();
    e.preventDefault();
    e.stopImmediatePropagation();
    return false;
});

// disable right click
$(document).bind('contextmenu', function(e) {
    e.stopPropagation();
    e.preventDefault();
    e.stopImmediatePropagation();
    return false;
});

pour le réactiver:

$(document).unbind('click');
$(document).unbind('contextmenu');
18
Charles Ma

quelque chose comme:

    $('#doc').click(function(e){
       e.preventDefault()
       e.stopImmediatePropagation() //charles ma is right about that, but stopPropagation isn't also needed
});

devrait faire le travail, vous pouvez également lier plus d'événements de souris en remplaçant pour: edit : ajoutez ceci dans la partie feezing

    $('#doc').bind('click mousedown dblclick',function(e){
       e.preventDefault()
       e.stopImmediatePropagation()
});

et cela dans le dégel:

  $('#doc').unbind();
8
alonisser

Le moyen le plus simple de geler l'interface utilisateur serait de rendre l'appel AJAX synchrone.

Habituellement synchrone AJAX déjouent le but d'utiliser AJAX car cela gèle l'interface utilisateur, mais si vous voulez pour empêcher l'utilisateur de interagir avec l'interface utilisateur, puis faites-le.

2
gilly3