我的假设是,如果我禁用了一个div,所有的内容也都禁用了。
然而,内容是灰色的,但我仍然可以与它互动。
有办法做到吗?(禁用一个div,让所有的内容也禁用)
我的假设是,如果我禁用了一个div,所有的内容也都禁用了。
然而,内容是灰色的,但我仍然可以与它互动。
有办法做到吗?(禁用一个div,让所有的内容也禁用)
当前回答
有一些可配置的javascript库可以接收html字符串或dom元素,并去掉不需要的标签和属性。这些被称为html杀菌剂。例如:
DOMPurify 疯狂的 sanitize-html
例如,在DOMPurify中
DOMPurify.sanitize('<div>abc<iframe//src=jAva	script:alert(3)>def</div>');
// becomes <div>abcdef</div>
其他回答
编辑: 下面我使用了.on()方法,改用.bind()方法
$(this).bind('click', false);
$(this).bind('contextmenu', false);
要删除设置,可以使用.unbind()方法。然而.off()方法并没有像预期的那样工作。
$(this).unbind('click', false);
$(this).unbind('contextmenu', false);
在研究了数百种解决方案后!学习指针事件,下面是我所做的。
正如@Kokodoko在他的解决方案中提到的,这适用于除IE之外的所有浏览器。指针事件在IE11中有效,在低版本中无效。我还注意到在IE11中,指针事件在子元素上不起作用。因此,如果我们有下面这样的东西
<a href="www.preshmalinetpereira.wordpress.com"><i class="car icon"></i><span>My Blog</span></a>
哪里span -是子元素,设置指针事件:无效
为了克服这个问题,我写了一个函数,它可以作为IE的指针事件,并且可以在较低的版本中工作。
在JS文件中
DisablePointerEvents(".DisablePointerEvents");
function DisablePointerEvents(classId) {
$(classId).each(function () {
$(this).on('click', false );
$(this).on('contextmenu', false );
});
}
在CSS文件中
.DisablePointerEvents{
pointer-events: none;
opacity: 0.7;
cursor: default;
}
在HTML中
<a href="www.preshmalinetpereira.wordpress.com" class="DisablePointerEvents"><i class="car icon"></i><span>My Blog</span></a>
这伪造了指针事件场景,即指针事件不工作,当上述条件的子元素发生时。
JS也一样
https://jsfiddle.net/rpxxrjxh/
测试浏览器:IE 9、Chrome、Firefox和jquery-1.7.1.min.js
$(document).ready(function () {
$('#chkDisableEnableElements').change(function () {
if ($('#chkDisableEnableElements').is(':checked')) {
enableElements($('#divDifferentElements').children());
}
else {
disableElements($('#divDifferentElements').children());
}
});
});
function disableElements(el) {
for (var i = 0; i < el.length; i++) {
el[i].disabled = true;
disableElements(el[i].children);
}
}
function enableElements(el) {
for (var i = 0; i < el.length; i++) {
el[i].disabled = false;
enableElements(el[i].children);
}
}
正如评论中提到的,您仍然可以通过使用tab键在元素之间导航来访问元素。所以我推荐这个:
$("#mydiv")
.css({"pointer-events" : "none" , "opacity" : "0.4"})
.attr("tabindex" , "-1");
禁用属性不是DIV元素的W3C规范的一部分,只是表单元素的一部分。
Martin建议的jQuery方法是实现这一目标的唯一万无一失的方法。
这是给搜索者的,
我做得最好的是,
$('#myDiv *').attr("disabled", true);
$('#myDiv *').fadeTo('slow', .6);