3

I have a situation in which i have to prevent all MouseClick events until the page loads.

i have 1 javascript function defined on page load like

onload="init();"

Now in function init(), we are showing tree and select a particular node of it.

function init() {
        ExpandAncestors(node);
        ExpandNode(node);
        setTimeout("treeScrollToView()", 1000);
}

Now i want to prevent all the mouse click event on tree/page until whole tree is not fully shown.

I have searched through some of the posts related to my question but that uses event.preventDefault() but i dont have Event object here.

Any help is greatly appreciated.

Sanket Pipariya
  • 79
  • 1
  • 12

5 Answers5

9

You can use:

CSS

body {
  pointer-events:none;
}

and then on page load reactivate them

$(document).ready(() => {
  $('body').css('pointer-events', 'all') //activate all pointer-events on body
})

Explanation

pointer-events:none; blocks all mouse interaction with the elements it's applied to - Since the body is usually the parent of all the elements in your page, it would case them not to react to any mouse interaction at all.

Keep in mind that all mouse interaction would be blocked this way, not only mouse clicks but mouse hover, mouse up's etc etc..

nicholaswmin
  • 21,686
  • 15
  • 91
  • 167
4

I think the basic need is to prevent user from clicking the tree area. I would prefer to display an overlay div rather than playing with the tree mouse click events.

You can show a loading overlay on the tree part until it is loaded. once done, you can hide the loading and show your original tree.

Ref: How to completely DISABLE any MOUSE CLICK

Community
  • 1
  • 1
Vijay
  • 2,965
  • 1
  • 15
  • 24
  • not that it would make any noticeable difference - but this would be the most *performant* way of doing this - add some code for this – nicholaswmin Apr 27 '15 at 04:31
  • I have added the reference link. Re-usability is the best policy :) – Vijay Apr 27 '15 at 04:34
  • This is the best way to do it... show transparent overlay while page loads... Most efficient and reliable way to sort click issues – Gags Sep 11 '16 at 05:12
2

JavaScript Only

You can have an event listener along with a boolean. onclick disables a click. oncontextmenu disables right clicks.

(function(){window.onload = function () {

    var allowClicks = false;

    document.onclick = function (e) {  !allowClicks&&e.preventDefault();  }
    document.oncontextmenu = function (e) {  !allowClicks&&e.preventDefault();  }
    document.getElementById('myElement').onload = function () { allowClicks = true; }

}());

myElement is your element which you can replace with whatever

Use this with one element

If you want to disable mouse clicks for just one element, do:

(function(){window.onload = function () {

    var allowClicks = false,
        elem = document.getElementById('myElement');

    elem.onclick = function (e) {  !allowClicks&&e.preventDefault();  }
    elem.oncontextmenu = function (e) {  !allowClicks&&e.preventDefault();  }
    elem.onload = function () { allowClicks = true; }

}());
Community
  • 1
  • 1
Downgoat
  • 13,771
  • 5
  • 46
  • 69
0

onload="init();" here you can have event object.

pass event as argument.

onload="init(event);"

now you can use that in init() function.

sachin.ph
  • 1,078
  • 12
  • 24
0

Try utilizing $.holdReady()

$.holdReady(true);

$(window).off("click");

$("*").each(function(i, el) {
  this.onclick = function(e) {
    e.preventDefault();
  }
});

 function init() {
  $("div").on("click", function() {
    alert($.now())
  })
}

setTimeout(function() {
  $.holdReady(false);
}, 7000)

$(function() {
    init()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<body>
<div>click</div>
  <a href="javascript:alert(new Date())">click</a>
</body>
guest271314
  • 1
  • 15
  • 104
  • 177