Как полностью отключить любую кнопку мыши - PullRequest
Новая
       6

Как полностью отключить любую кнопку мыши

40 голосов
/ 22 декабря 2011

После того, как пользователь нажал на кнопку .... «войти» и другие события, я сделал загрузочный скрипт, чтобы пользователи знали, что им нужно ждать (пока ajax не ответит).

Как я могу отключить любые щелчки мышью (щелчок правой кнопкой, левый щелчок, двойной щелчок, средний щелчок, х щелчок) , на div id="doc"?
Я хочу добавить этот код к 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

Ответы [ 5 ]

49 голосов
/ 02 сентября 2014

Вы можете добавить простое правило css3 в теле или в конкретном div, используйте свойство pointer-events: none;.

37 голосов
/ 22 декабря 2011

Вы можете наложить большой, полупрозрачный <div>, который принимает все клики. Просто добавьте новый <div> к <body> с этим стилем: 

.overlay {
    background-color: rgba(1, 1, 1, 0.7);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}
18 голосов
/ 22 декабря 2011

Чтобы отключить все клики мышью 

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

, чтобы включить его снова: 

$(document).unbind('click');
$(document).unbind('contextmenu');
8 голосов
/ 22 декабря 2011

что-то вроде: 

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

должен сделать работу Вы также можете связать больше событий мыши с заменой на: редактировать : добавить это в часть оплаты 

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

а это в разморозке: 

  $('#doc').unbind();
2 голосов
/ 22 декабря 2011

Самый простой способ заморозить пользовательский интерфейс - синхронный вызов AJAX.

Обычно синхронные вызовы AJAX лишают цели использования AJAX, потому что он замораживает пользовательский интерфейс, но если вы хотите запретить пользователю взаимодействовать с пользовательским интерфейсом, сделайте это.

...