disable click on div element

Question

I've been trying for a good while to try and disable a click on a div.

The reason behind this is to stop unauthorised users from triggering events etc which are activated when a user clicks on a div. From my attempt below i tried a click false but it doesnt seem to work, maybe im not using the correct syntax to disable the div?

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

update:

here is the complete code involved

View

    <h2>Notifications & Updates</h2>

    <p id="content2" contenteditable"true" ></p>

    <button id="save">Save Changes</button>

</div>

<div id="Section2"></div>

@*Scripts go at end for the contenteditable div to load correctly*@
<script type="text/javascript" src="~/Scripts/jquery.js"></script>
<script type="text/javascript" src="~/Scripts/editable.js"></script>
<script type="text/javascript" src="~/Scripts/EditContentHome.js"></script>

@if (User.Identity.Name == "WORKER")
{
    <script type="text/javascript" src="~/Scripts/SecurityEditHide.js"></script>
}

SecurityEditHide.JS

window.onload = function () {
$('textarea').prop('disabled', true);

$('#content2').on('click', false);
$('#content2').prop('contenteditable', false);
$('#save').hide();
};

EditContentHome.JS

    $("#content2").click(function () {
    $("#save").show(1000);

});

$("#save").click(function () {
    $("#save").hide(1000);

});

"...it doesnt seem to work..." How? What are you seeing that makes you think it's not working? Works here: jsfiddle.net/fgqrc4kv — T.J. Crowder
– T.J. Crowder, Commented Apr 9, 2015 at 16:29
You need to wrap the click functionality in a conditional tag that checks whether the user is authorized or not, if they're not authorized clicking the div will do nothing. — APAD1
– APAD1, Commented Apr 9, 2015 at 16:29
stackoverflow.com/questions/5259191/… and perhaps you should consider not binding the click event in the first place until the user is authorized? Also, I should advise you not to rely on this for security purposes as users can modify the js on your page. — sricks
– sricks, Commented Apr 9, 2015 at 16:29
Are the events on the div or are they inside the div on other elements? Why are the events attached in the first place if the user is not authorized? — epascarello
– epascarello, Commented Apr 9, 2015 at 16:35
@epascarello i basically have a content editable div, when a user clicks on it the it shows the edit button etc, now when a user logs in that isnt admin, the contenteditable div should be disabled to stop them from changing the html text, its not a huge security risk, the contenteditable is basically a message from admin to workers on the factory floor — Matchbox2093
– Matchbox2093, Commented Apr 9, 2015 at 16:38

T.J. Crowder · Accepted Answer · 2015-04-09 16:58:29Z

2

Change

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

to

$('#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>

edited Apr 9, 2015 at 16:58

answered Apr 9, 2015 at 16:51

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matchbox2093 Over a year ago

Thanks T.J ! i appreciate the help! thanks for explaining stopImmediatePropagation as well

I.Tyger · Accepted Answer · 2015-04-09 17:04:47Z

-1

Naturally divs are not clickable except you attach an onclick event to them , however you can do this

.enable{
    //indicate your preferred color  
    background-color: blue;
     cursor : pointer ;

  }

 .disable{
  background-color: grey;
   cursor:none ;
  }

You can then check for user authorization when a click is done if authorized apply the right css using jquery.removeClass().addClass('enable') else jquery.removeClass().addClass('disable').

answered Apr 9, 2015 at 17:04

I.Tyger

8051 gold badge10 silver badges20 bronze badges

Collectives™ on Stack Overflow

disable click on div element

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related