How to completely DISABLE any MOUSE CLICK
You can overlay a big, semi-transparent <div>
that takes all the clicks. Just append a new <div>
to <body>
with this style:
.overlay {
background-color: rgba(1, 1, 1, 0.7);
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
}
Disable mouse click when out of div
You cannot prevent the click event being fired from the whole document. You can do it per element basis. You can probably block the whole screen using a absolute positioned transparent(low opacity) div and hide it again once the div is visible.
var $body = $(document.body);
var $div = $("<div id='dummyDiv'/>").hide().appendTo($body);
$div.css({position:"absolute", height: $body.height(), width: $body.width(), background: "#000", opacity: 0.5}).show(100);
//to hide it
$("#dummyDiv").hide(100);
Disable mouseClick on a part of the Screen
You need to add event handler to the div
with addEventHandler
. Inside the handler you need to use event.preventDefault()
for the default behavior of the event to be cancelled and event.stopPropagation()
to stop the event from bubbling up to parent elements. In the example below if you click around the red square, it will print 'clicked'. If you click inside the square, nothing happens:
document.addEventListener('click', function(e) { console.log("clicked");});
document.getElementById('disabled-mouse').addEventListener('click', function(event) { event.preventDefault(); event.stopPropagation();});
#disabled-mouse { margin: 20px; width: 50px; height: 50px; background-color: red;}
<div id="container"> <div id="disabled-mouse"> </div></div>
How do I disable right click on my web page?
You can do that with JavaScript by adding an event listener for the "contextmenu" event and calling the preventDefault()
method:
document.addEventListener('contextmenu', event => event.preventDefault());
That being said: DON'T DO IT.
Why? Because it achieves nothing other than annoying users. Also many browsers have a security option to disallow disabling of the right click (context) menu anyway.
Not sure why you'd want to. If it's out of some misplaced belief that you can protect your source code or images that way, think again: you can't.
How to disable clicking inside div
The CSS property that can be used is:
pointer-events:none
!IMPORTANT
Keep in mind that this property is not supported by Opera Mini and IE 10 and below (inclusive). Another solution is needed for these browsers.
jQuery METHOD
If you want to disable it via script and not CSS property, these can help you out:
If you're using jQuery versions 1.4.3+:
$('selector').click(false);
If not:
$('selector').click(function(){return false;});
- Referenced from :
jquery - disable click
You can re-enable clicks with pointer-events: auto;
(Documentation)
Note that pointer-events
overrides the cursor
property, so if you want the cursor to be something other than the standard , your css should be place after pointer-events
.
Related Topics
Replace All Spaces in a String with '+'
How to Get the First Element of an Array
How to Configure Different Environments in Angular.Js
How to Join Two JavaScript Objects, Without Using Jquery
External Template in Underscore
Keycode Values for Numeric Keypad
Getting a Jquery Selector for an Element
Why Do Arrow Functions Not Have the Arguments Array
$Http.Get(...).Success Is Not a Function
Reactjs Syntheticevent Stoppropagation() Only Works with React Events
Change Route Params Without Reloading in Angular 2
How to Create a Custom Error in JavaScript
Clearing Localstorage in JavaScript
How to Make a Div Element Editable (Like a Textarea When I Click It)
Lodash Remove Duplicates from Array
Editing in the Chrome Debugger