Question

我的问题是我有这个盒子也叫容器。在该容器内部有用户可以点击的框。

为了向用户提供视觉帮助，我制作了带有灰色渐变颜色的叠加框告诉他们他们可以在这里使用这些方块。

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

那么有没有办法忽略元素的.click()并使用下一个目标？

enter image description here

Answer 1

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

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

#element {
  pointer-events: none;
}

或者您可以trigger click事件：

$('#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），并在您选择的元素上评估为true或false ，鼠标在那个元素上。

通过使用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" />

jQuery - 触发元素后面的click事件

3 个答案: