Reputation: 3972

Disable mouse and key events in Div

I have multiple Html elements inside a div. Is there any way to disable mouse and key events for that Div(Not for individual elements)? The elements are auto generated and are inside multiple spans. Hence i just want to disable the whole div so that nothing can be changed but readonly.

Upvotes: 8

Answers (9)

SiL3NC3

Reputation: 770

Here is my used solution, which is automatically catching all readonly marked inputs via jQuery for click and keypress events - quite easy and simple fix, to make them really READONLY.

Nothing more to think about, just mark desired inputs as readonly and your are done.

 // prevent click and keypress events for readonly marked inputs
$(":input[readonly='readonly']").on("click keypress", function (event) {
    event.preventDefault();
});

Possibly a little flickering during the click and keypress events is visible with Bootstrap. ;)

Upvotes: 0

sujithuix

Reputation: 264

Can be solved by CSS. Use the below code

.div-element {
   pointer-events: none; // disable all the pointer events in div
}
.div-element * {
   pointer-events: auto; // enables all the pointer events in children elements of the div
}

Upvotes: 1

nicpas

Reputation: 101

This worked as I expected:

element.style {
   pointer-events: none;
}

Upvotes: 0

Mikel

Reputation: 141

I´m using this for completely disable click for all the window. Is a transparent overlay panel with a high z-Index, with this you can´t click anywhere.

var $ventanaModal = $('<div id="pantallaTransparente" class="ip-container containerFondoModal zIndexAlto"></div>');

$('body').prepend($ventanaModal);

And here is the css class:

.pantallaTransparente {
background: transparent;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 99999999;
}

Upvotes: 2

Hugo Silva

Reputation: 6948

As per jQuery docs, unbind method removes a previously-attached event handler from the elements. My understanding is that you just want to prevent the default browser events from being triggered, instead of removing previously attached events.

There is a simple CSS solution for it, which doesn't work on IE10 and below:

#yourDiv {pointer-events:none;}

A solution using jQuery would be adding an event to your div, and then preventing default behavior from happening on events of your choice:

$('#yourDiv').click(function(e){
    e.preventDefault();    
});

Click events should also work for keyboard access to check boxes and radio buttons, but in case you need, for example, prevent text typing on an input field, just add keyboard events to the list:

$('#yourDiv').click(function(e){
    e.preventDefault();    
});
$('#yourDiv').keypress(function(e){
    e.preventDefault();
});

I am just posting this answer because it might help other people looking for similar functionality, but I believe there are better ways of doing this on your case. You could run a function to set your elements to disabled $('#yourDiv input').prop("disabled", true); after loading. Hard to tell without knowing your html.

Upvotes: 7

Antoine Mouquod

Reputation: 130

Here is another old trick.

To avoid any contact with the mouse on your div, place another div of the same size on top (with z-index) of it with an opacity of 0 (or equivalent for older browser).

You trigger it by changing the display property from none (default) to block. When the div has a display set to block it will be on top of your regular div and make a wall between the mouse and your div.

It might not fit with your specific page and css architecture but if it does, it's easy to setup. :)

Upvotes: 1