Question

我有这个非常简单的案例

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的clickevent被触发注意.top

只有当您从红色形状的右侧点击大约10-20px时才会触发.top clickevent

有人知道为什么吗？以及如何解决这个问题？

我在Chrome版本28.0.1500.72 m

中测试过在Firefox中，点击区域在红色形状上更大。如果你点击红色形状的最左侧，它只会触发错误的事件。

rotateY后点击区域变小

0 个答案: