如何禁用/重新启用html元素及其子元素上的所有点击/触摸/鼠标事件

我有一个父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>

What I've try

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

我也试过添加一个'faded'类，然后像这样检查它:

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

. .但似乎"on"动作没有考虑到选择器的新类。之类的!

请帮助。我很乐意考虑一种完全不同的方法来解决这个问题。谢谢。

如果你真的想禁用一切，而不仅仅是javascript中添加的事件处理程序，你必须确保所有默认操作都被阻止。

要确保所有与元素的交互都被禁用，最简单的方法是在其上放置另一个元素，或者使用CSS禁用所有的指针事件

在现代浏览器(ie11及以上版本)你可以使用指针事件

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

在较旧的浏览器中(ie10及以下)，你可能不得不使用覆盖所有其他元素的覆盖

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

你可以使用标志(阅读@Banana的回答)。另外，你可以使用jQuery (un)处理事件:

// idea
$('#selector').on('event.name', function(){
    // do something
    // then remove event
    $(this).off('.name');
});
// example
$('#selector').on('click.eventsGroup1', function(){
    // do something
    // then remove event
    $(this).off('.eventsGroup1');
});

你有你需要的所有信息在jQuery文档

使用CSS可以指定元素是否可以接收鼠标事件:

https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

关闭鼠标事件:

$(".container a").css({ "pointer-events": "none" });

再次打开它们:

$(".container a").css({ "pointer-events": "auto" });

正如许多海报所指出的，你可以使用pointer-events属性来防止点击。由于内联样式是一个邪恶的东西，我将发布一个CSS解决方案:添加一个类:"disable-click"到元素，并添加CSS代码:

.disable-click {
    pointer-events: none;
    position: relative;
}
.disable-click * {
    pointer-events: none;
}
.disable-click:before {
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    bottom:0;
    left:0;
    right:0;
    background: transparent;
}

这将阻止用户使用click和touch事件与容器及其子容器进行交互。这在现代浏览器上效果最好，但我也添加了伪元素"mask"，它也将在旧的浏览器上提供类似的功能。

请注意:这并不总是阻止用户使用键盘进入"禁用"元素。对于较旧的浏览器尤其如此。

标志是你最好的朋友:

var ClicksEnabled=true;
$('.container a').on({
     click: function (e) {
         if(ClicksEnabled){
             $('.container').fadeTo("slow", 0.5);
             $('.info').fadeTo("slow", 1);
             ClicksEnabled=false;
         }
     }
 });
$('.container').on("click", "*", function (e) {
    if (!ClicksEnabled) {
        e.preventDefault();
    }
});

这是你的固定代码片段:

$(function() {
  var ClicksEnabled = true;
  $('.container a.show_info').on({
    click: function(e) {
      if (ClicksEnabled) {
        $('.container').fadeTo("slow", 0.5);
        $('.info').fadeTo("slow", 1);
        ClicksEnabled = false;
      }
    }
  });
  $('.container').on("click", "*", function(e) {
    if (!ClicksEnabled) {
      e.preventDefault();
    }
  });
  $('.info a').on({
    click: function(e) {
      if (!ClicksEnabled) {
        $('.info').fadeOut();
        $('.container').fadeTo("slow", 1);
        ClicksEnabled = true;
      }
    }
  });
});

.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 class="show_info" 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>

What I've try

相关内容

最新更新

热门标签：