web-dev-qa-db-ja.com

マウスクリックを完全に無効にする方法

ユーザーが「...」「ログイン」ボタン、およびその他のイベントをクリックした後、ロードスクリプトを作成しました-ユーザーが待機する必要があることを知らせるために（ajaxが返信するまで）。

マウスクリック（右クリック、左クリック、ダブルクリック、ミドルクリック、xクリック）を無効にする方法、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
javascriptjqueryonclickmouseevent
41
Omar

すべてのクリックをとる大きな半透明の<div>をオーバーレイできます。このスタイルで新しい<div>を<body>に追加するだけです：

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

本文または特定のdivに単純なcss3ルールを追加するには、pointer-events: none;プロパティを使用します。

49
Leonardo Salles

すべてのマウスクリックを無効にするには

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');
18
Charles Ma

何かのようなもの：

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

edit ：を置き換えることで、より多くのマウスイベントをバインドすることもできます。

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

そして、これは解凍中：

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

UIをフリーズする最も簡単な方法は、AJAXを同期的に呼び出すことです。

通常、同期AJAX呼び出しは、UIをフリーズするため、AJAXを使用する目的に反しますが、want UIと対話してから実行します。

2
gilly3