jQuery - 在后面的元素上触发点击事件

Question

我的问题是我有这个盒子，也就是容器。在该容器内有用户可以单击的框。

为了在视觉上帮助用户，我制作了带有灰色淡出颜色的叠加框 这告诉他们他们可以使用这里的盒子。

但我的问题是点击事件在覆盖框后面的框上。

那么有什么方法可以忽略元素的.click() 并使用下一个目标？

Answer 1

您可以使用 CSS pointer-events 属性：

CSS 属性pointer-events 允许作者控制特定图形元素在什么情况下（如果有）可以成为鼠标事件的目标。

#element {
  pointer-events: none;
}

或者你可以triggerclick事件：

$('#box').click(function(){
   $('#target').trigger('click')
})

Answer 2

避免使用 CSS pointer-events ...

首先，确保包含的盒子都具有类名box（或类似名称）。

其次，使用.addClass('inactive') 使框处于非活动状态（在样式表中使用相应的 CSS 指令来处理背景颜色和边框）。要重新激活盒子，只需.removeClass('inactive')。

第三，将点击框的处理委托给容器，如下所示：

$('#container').on('click', '.box', function() {
    //common behaviour (pre)
    if($(this).hasClass("inactive")) {
        //inactive box behaviour
    }
    else {
        //active box behaviour
    }
    //common behaviour (post)
});

Answer 3

您可以使用由Ivan Castellanos 开发的立即调用函数表达式 (IIFE)，它将检测您的鼠标指针在 (x,y) 的位置，并在您选择的元素上评估为真或假，如果事实上，鼠标在那个元素上。

通过使用 Ivan 的代码，我能够生成这个概念证明，它会产生与 pointer-events: none; 相同的结果，但跨浏览器的兼容性稍好一些。它使用 jQuery .offset() 方法。在 jsFiddle 中，有一个包含 3 个元素的页面，两个 <button> 和一个 <div> 覆盖在按钮顶部，不透明度为 50%。在正常情况下，如果不调整 z-index，您将无法单击这些元素。

jsFiddle Example

//CSS Hitbox Solution 08-26-2015
//StackOverflow - https://stackoverflow.com/questions/32233084/show-an-element-without-hitbox-does-not-take-mouse-touch-input
//Detect MouseOver https://stackoverflow.com/questions/1273566/how-do-i-check-if-the-mouse-is-over-an-element-in-jquery
//Source: https://stackoverflow.com/questions/3942776/using-jquery-to-find-an-element-at-a-particular-position
//https://css-tricks.com/snippets/jquery/get-x-y-mouse-coordinates/
(function($) {
  $.mlp = {
    x: 0,
    y: 0
  }; // Mouse Last Position
  function documentHandler() {
    var $current = this === document ? $(this) : $(this).contents();
    $current.mousemove(function(e) {
      jQuery.mlp = {
        x: e.pageX,
        y: e.pageY
      };
    });
    $current.find("iframe").load(documentHandler);
  }
  $(documentHandler);
  $.fn.ismouseover = function(overThis) {
    var result = false;
    this.eq(0).each(function() {
      var $current = $(this).is("iframe") ? $(this).contents().find("body") : $(this);
      var offset = $current.offset();
      result = offset.left <= $.mlp.x && offset.left + $current.outerWidth() > $.mlp.x && offset.top <= $.mlp.y && offset.top + $current.outerHeight() > $.mlp.y;
    });
    return result;
  };
})(jQuery);
$('.notification-box').on("click", function() {
  $("button").each(function(i) {
    var iteratedButton = $('button:eq(' + i + ')');
    var buttonID = iteratedButton.attr("id");
    if (iteratedButton.ismouseover()) {
      iteratedButton.toggleClass(buttonID);
    }
  });
});

.notification-box {
  position: absolute;
  height: 100vw;
  width: 100vw;
  background-color: black;
  opacity: 0.5;
  /*pointer-events: none;*/
  z-index: -10;
  overflow: visible;
}
button {
  position: absolute;
  top: absolute;
  width: 50px;
  z-index: -10;
}
button#no {
  margin-top: 25px;
}
.yes {
  color: red;
  font-weight: bold;
}
.no {
  color: blue;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<button id='yes'>Yes</button>
<button id='no'>No</button>
<div id='no' class="notification-box" />