javascript - jQuery-背後の要素でもクリックをトリガーします

Question

私の問題は、私がこのボックス、別名コンテナを持っていることです。そのコンテナ内には、ユーザーがクリックできるボックスがあります。

ユーザーを視覚的に支援するために、ここでボックスを使用できることを示す灰色のフェードアウト色のオーバーレイボックスを作成しました。

しかし、私の問題は、クリックイベントがオーバーレイボックスの後ろのボックスにあることです。

では、要素を無視して.click()次のターゲットを使用する方法はありますか？

Answer 1

CSSpointer-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').

3 番目に、ボックスのクリックの処理を次のようにコンテナーに委任します。

$('#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によって開発された Immediate Invoked Function Expression (IIFE) を使用できます。これは、マウス ポインターがどこにあるか (x,y) を検出し、実際にマウスがその上にあった場合、選択した要素で true または false に評価されます。エレメント。

pointer-events: none;Ivan のコードを利用することで、ブラウザ間で互換性がわずかに高いものの、同じ結果を生成するこの概念実証を生成することができました。jQuery.offset()メソッドを使用します。jsFiddle には、2 つの要素と 50% の不透明度でボタンの上にオーバーレイされた<button>1 つの要素の 3 つの要素を持つページがあります。<div>通常の状態では、Z インデックスを微調整しないと、これらの要素をクリックすることはできません。

jsFiddle の例

//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" />