正如评论中提到的，您仍然可以通过使用tab键在元素之间导航来访问元素。所以我推荐这个:

$("#mydiv")
  .css({"pointer-events" : "none" , "opacity" :  "0.4"})
  .attr("tabindex" , "-1");

类似于cletu的解决方案，但我得到了一个错误使用的解决方案，这是解决方案:

$('div *').prop('disabled',true);
// or
$('#the_div_id *').prop('disabled',true);

对我来说还行

编辑: 下面我使用了.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/>的内容

CSS指针事件属性本身并不会禁止子元素滚动，并且对于<div/>元素，IE10及以下版本不支持它(仅针对SVG)。 http://caniuse.com/#feat=pointer-events

在所有浏览器上禁用<div/>的内容。

Jquery:

$("#myDiv")
  .addClass("disable")
  .click(function () {
    return false;
  });

CSS:

.disable {
  opacity: 0.4;
}

/* Disable scrolling on child elements */
.disable div,
.disable textarea {
  overflow: hidden;
}

在除IE10及以下版本的所有浏览器上禁用<div/>的内容。

Jquery:

$("#myDiv").addClass("disable");

CSS:

.disable {
  /* Note: pointer-events not supported by IE10 and under */
  pointer-events: none;
  opacity: 0.4;
}

/* Disable scrolling on child elements */
.disable div,
.disable textarea {
  overflow: hidden;
}