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

仅当您在红色形状的右侧单击大约 10-20 像素时，才会触发 .top clickevent

有人知道为什么吗？我该如何解决？

我已经在 chrome 版本 28.0.1500.72 m 中进行了测试

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

4

0 回答 0