0

私はこの非常に単純なケースを持っています

http://codepen.io/destroy90210/pen/misyj

html

<body>
  <div class="below"></div>
  <div class="top"></div>
</body>

CSS

html, body
  height: 100%
  width: 100%

body
  perspective: 3000px

.below
  height: 100%
  width: 100%
  background-color: #000
  position: absolute


.top
  background-color: #ff0000
  position: absolute
  top: 10em
  left: 10em
  width: 200px
  height: 200px
  transform-origin: 80% 0%
  transform: rotateY(-50deg)

js

  $(".below").on("click", function(){
    console.log("below")
  })

  $(".top").on("click", function(){
   console.log("top")
  })

赤（.top）の形状をクリックすると、.below のクリックイベントが発生します。.top に注意してください。

赤い形の右から約 10 ～ 20 ピクセルをクリックした場合にのみ、.top クリックイベントが発生します。

誰かが理由を知っていますか？どうすればそれを修正できますか？

私はクロムバージョン28.0.1500.72 mでそれをテストしました

Firefox では、赤い形状のクリック領域が大きくなります。赤い図形の一番左側をクリックすると、間違ったイベントが発生するだけです。

4

0 に答える 0