Disable mouse and key events in Div

Question

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.

Answer 1

Try with .unbind() like

$('#my_div_id').unbind();

it will remove all the events that will attached to that div.See this UNBIND

You can use .die also like

$('#my_div_id').die();

Answer 2

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.