禁用单击div元素

时间:2015-04-09 16:27:17

标签: javascript jquery html

我一直试图尝试禁用对div的点击。

这背后的原因是阻止未经授权的用户触发在用户点击div时激活的事件等。从我下面的尝试我尝试点击假,但它似乎没有工作,也许我没有使用正确的语法来禁用div?

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

更新

这是完整的代码

查看     

    <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);

});

2 个答案:

答案 0 :(得分:1)

更改

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

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

删除您在早期脚本中设置的点击处理程序。 (以下示例。)

您的$('#content2').on('click', false);无法正常工作,因为它只是将第二个处理程序附加到阻止默认操作并停止传播的元素。但那些没有做任何事情来阻止其他处理程序调用相同的元素。 (有stopImmediatePropagation,确实如此,但在这种情况下完全删除处理程序真的会更好。)

实例:

<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>

答案 1 :(得分:-1)

除了你给他们附上onclick事件之外,自然div不可点击,但你可以这样做

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

  }

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

如果授权使用jquery.removeClass()应用正确的css,则可以检查用户授权.addClass(&#39; enable&#39;)else jquery.removeClass()。addClass(&# 39;禁用&#39;。)