How to Disable Clicking Inside Div

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 cursor , your css should be place after pointer-events.

disable click on div element

Change

$('#content2').on('click', false);

$('#content2').off('click');

That removes the click handler that you've set up in your earlier script. (Example below.)

Your $('#content2').on('click', false); didn't work because all it did was attach a second handler to the element that prevented the default action and stopped propagation. But those don't do anything to prevent other handlers for the same element getting called. (There is stopImmediatePropagation, which does, but you're really better off just removing the handler entirely in this case.)

Live example:

<h2>Notifications & Updates</h2>
<p id="content2" contenteditable="true">Presumably some text here</p>
<button id="save">Save Changes</button>
</div>
<div id="Section2"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script>// From EditContentHome.JS:$("#content2").click(function () {    $("#save").show(1000);});</script><script>// From SecurityEditHide.JS:window.onload = function () {    $('textarea').prop('disabled', true);
    $('#content2').off('click'); // <==== Change is here    $('#content2').prop('contenteditable', false);    $('#save').hide();};</script>

disable clicking of a divs element

Edit mode enter:

$("#container").children().bind('click', function(){ return false; });

Edit mode exit:

$("#container").children().unbind('click');

How to prevent the click event using CSS?

You can try the css class:

.noClick {
   pointer-events: none;
}

How to disable click on <div> when <button> in <div> is clicked

It happens because of event propagation. To fix the problem you need to use stopPropagation on the event object.

handleDelete(event) {
  event.stopPropagation()
  this.deleteContent()
}

<Button
  onClick={this.handleDelete.bind(this)}
  className="delete-content">X
</Button>

How to disable a div after only one click in javascript without disabling click event on elements within it?

You want to make sure you have a function handler. The way you're doing it doesn't work because you're not removing the proper event listener. You're using an anonymous function, but you need to point to the actual function handler used for the event to be removed.

Also, I'm not sure what you are trying to do with disabling your div. I removed that line, because you can't disable a div.

I also refactored a bit to make the code a bit cleaner and easier to read.

document.getElementById('elemId').addEventListener('click', addButton, false);
function addButton() {   var button = document.createElement("button");   var buttonText = document.createTextNode("click me");   var clickElement = document.getElementById('elemId');      button.appendChild(buttonText);   clickElement.appendChild(button);      clickElement.removeEventListener('click', addButton, false);}

<div style="background-color: teal; height: 100px; width: 100px; " id="elemId">Count</div>

disabling click events for all elements that contain a certain class

One of the big problems is that jQuery only attaches and listens to bubbling events. If you attach a listener to the document, it will only ever run after all intermediate listeners (between the clicked element and the document) have fired.

I'd use vanilla JS instead, so that you can attach a listener in the capturing phase, before the event captures down to the target. Then stopPropagation will prevent the event from reaching the target in the first place.

document.addEventListener(
  'click',
  (e) => {
    if (e.target.closest('.btn-disabled')) {
      e.stopPropagation();
    }
  },
  true // attach in capturing phase
);

If you do this, you can then add listeners as you wish to any buttons (or even to the document) using jQuery - and any clicked buttons that happen to have a btn-disabled class (or an ancestor element with a btn-disabled class) will not have their click handlers fire, regardless of whether the listener is attached to the button or a parent element.

How to Disable Clicking Inside Div