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

How to disable / re-enable all click/touch/mouse events on an html element and children

提问by Mere Development

I have a parent HTML element with various links, SVGs, text within it at various levels. When a certain link in the parent element is clicked, I'm trying to fade it 50% and disable any further interaction with it from touch / mouse events until it's re-enabled.

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

My code is complex and spaghetti-like so here is a very simple example:

我的代码很复杂，像意大利面条一样，所以这是一个非常简单的例子：

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

我试过的

When containeris faded I've attempted to set disabled attributes on all children, which works for any form inputs, but not for links.

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

I've also tried adding a 'faded' class and then checking for it like so:

我还尝试添加一个“褪色”类，然后像这样检查它：

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

..but it seems that the 'on' action doesn't take into account the new class for the selector.. or something!

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

Help please. I'm very happy to consider a completely different way to tackle this. Thanks.

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

采纳答案by adeneo

If you want to really disable everything, not just the event handlers added with javascript, you have to make sure even all the default actions are prevented.

如果您想真正禁用所有内容，而不仅仅是使用 javascript 添加的事件处理程序，您必须确保甚至所有默认操作都被阻止。

The easy way to make sure allinteraction with an element is disabled, is to put an other element on top of it, or by using CSS to disable all pointer-events

确保禁用与元素的所有交互的简单方法是将另一个元素放在它上面，或者使用 CSS 禁用所有指针事件

In modern browsers (from IE 11 and up)you can use pointer-events

在现代浏览器（从 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>

In older browsers (IE 10 and down), you'll probably have to use an overlay that covers all the other elements

在较旧的浏览器（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>

回答by kosmos

You can use flags (read @Banana's answer). Also, you can (un)handle events using jQuery:

您可以使用标志（阅读@Banana 的回答）。此外，您可以（取消）使用 jQuery 处理事件：

// 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');
});

You have all the information you need at jQuery Docs.

您可以在jQuery Docs 获得所需的所有信息。

回答by Olaf Now

with css you can specify if an element can receive mouse events:

使用 css，您可以指定元素是否可以接收鼠标事件：

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

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

to turn mouse events off:

关闭鼠标事件：

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

turning them on again:

再次打开它们：

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

回答by Banana

Flags are your best friends:

旗帜是你最好的朋友：

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

Here is your fixed snippet:

这是您的固定片段：

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

回答by Kenneth Moore

As many posters have noted you can use the pointer-events property to prevent clicks. Since inline styles are an evil thing I will post a CSS solution: Add a class: "disable-click" to the element and add the CSS code :

正如许多海报所指出的，您可以使用 pointer-events 属性来防止点击。由于内联样式是一件邪恶的事情，我将发布一个 CSS 解决方案：向元素添加一个类：“禁用-单击”并添加 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;
}

This should prevent users from being able to interact with the container and it's children using click and touch events. This works best on modern browsers but I also added the pseudo element "mask" which will provide similar functionality on older bowsers as well.

这应该可以防止用户使用单击和触摸事件与容器及其子项进行交互。这在现代浏览器上效果最好，但我还添加了伪元素“掩码”，它也将在较旧的浏览器上提供类似的功能。

Please note: this will not always prevent users from being able to tab into a "disabled" element using the keyboard. This is especially true for older browsers.

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