如何在html元素和子元素上禁用/重新启用所有单击/触摸/鼠标事件

Question

我有一个父HTML元素,其中包含各种链接,SVG,各种级别的文本.当单击父元素中的某个链接时,我试图将其淡化50%并禁用与触摸/鼠标事件进行的任何进一步交互,直到重新启用它为止.

我的代码很复杂,像意大利面条一样,所以这里有一个非常简单的例子:

$(function() {

  $('.container a').on({
    // I'm just showing click below for simplicity, I'll be adding some handling for mouse/touch events.
    click: function(e) {
      $('.container').fadeTo("slow", 0.5);
      $('.info').fadeTo("slow", 1);
    }
  });

  $('.info a').on({
    click: function(e) {
      $('.info').fadeOut();
      $('.container').fadeTo("slow", 1);
    }
  });

});

.container {
  background-color: #123435;
  padding: 1em;
}
.info {
  display: none;
  background-color: #435123;
  padding: 1em;
}
.container a,
.info,
.info a {
  color: #bbc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <a href="#">Show Info (click me)</a>
  <br>
  <a href="thingy1.htm">Other Link 1</a>
</div>
<div class="info">
  Some info (div.container and all it's contents now need to be totally disabled)
  <br>
  <a href="#">Hide Info</a>
  <br>
</div>

我试过的

当container褪色时,我试图在所有子节点上设置禁用属性,这适用于任何表单输入,但不适用于链接.

我也尝试添加一个'褪色'类,然后像这样检查它:

$('.container:not(.faded) a').on({
  click: function(e) {
    $('.container').addClass("faded").fadeTo("slow", 0.5);
    $('.info').fadeTo("slow", 1);
  }
});

..但似乎'on'动作没有考虑选择器的新类......或者其他东西!

请帮忙.我很高兴考虑采用一种完全不同的方式来解决这个问题.谢谢.

Answer 1

如果你想真正禁用所有内容,而不仅仅是添加了javascript的事件处理程序,你必须确保甚至阻止所有默认操作.

确保禁用与元素的所有交互的简单方法是在其上放置其他元素,或者使用CSS禁用所有指针事件

在现代浏览器中(从IE 11开始),您可以使用指针事件

$(function() {
  $('.container a').on('click', function(e) {
      $('.container').fadeTo("slow", 0.5).css('pointer-events', 'none');
      $('.info').fadeTo("slow", 1);
  });

  $('.info a').on('click', function(e) {
      $('.info').fadeOut();
      $('.container').fadeTo("slow", 1).css('pointer-events', 'auto');
  });
});

.container {
  background-color: #123435;
  padding: 1em;
}

.info {
  display: none;
  background-color: #435123;
  padding: 1em;
}

.container a, .info, .info a {
  color: #bbc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"> <a href="#">Show Info (click me)</a>
  <br> <a href="thingy1.htm">Other Link 1</a>
</div>
<div class="info">Some info (div.container and all it's contents now need to be totally disabled)
  <br> <a href="#">Hide Info</a>
  <br>
</div>

在旧版浏览器(IE 10及更低版本)中,您可能必须使用覆盖所有其他元素的叠加层

$('.container a').on('click', function(e) {
  $('.info').fadeTo("slow", 1);

  var container = $('.container').fadeTo("slow", 0.5);
  var overlay   = container.clone(false);

  overlay.empty().prop('id', 'overlay').css({
    cssText    : container.css('cssText'),
    top        : container.position().left,
    left       : container.position().top,
    position   : 'absolute',
    background : 'transparent'
  }).appendTo(container.parent());
});

$('.info a').on('click', function(e) {
  $('.info').fadeOut();
  $('.container').fadeTo("slow", 1);
  $('#overlay').remove();
});

.container {
  background-color: #123435;
  padding: 1em;
}

.info {
  display: none;
  background-color: #435123;
  padding: 1em;
}

.container a, .info, .info a {
  color: #bbc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"> <a href="#">Show Info (click me)</a>
  <br> <a href="thingy1.htm">Other Link 1</a>
</div>
<div class="info">Some info (div.container and all it's contents now need to be totally disabled)
  <br> <a href="#">Hide Info</a>
  <br>
</div>