防止事件中的其他元素

Question

以下代码是我的代码的简单版本。当我将鼠标移到#realWrapper上时，我的代码中会显示粗边框。

问题在于，当我将鼠标悬停在a标记和.btn上时，这些标记位于包含#wrapper的同级div内，mouseout事件为#realWrapper发生！

所以，如果我将background-color: #000 css添加到#realWrapper，那么它很好，但#wrapper覆盖的内容#realWrapper。

$(document).ready(function() {
  $("#realWrapper").mouseover(function(e) {
    $(e.target).css("border-color", "#f00");
  }).mouseout(function(e) {
    $(e.target).css("border-color", "#000");
  });
});

#item {
  position: relative;
  width: 100px;
  height: 100px;
}

#realWrapper {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  z-index: 10;
}

#wrapper {
  width: 100%;
  height: 100px;
}

a {
  margin-top: 20px;
}

.btn {
  margin: 10px auto 0;
  width: 40px;
  height: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item">
  <div id="realWrapper"></div>
  <div id="wrapper">
    <div>
      <a href="#">Hi abcdefg!</a>
      <div class="btn">
        OK
      </div>
    </div>
  </div>
</div>

有没有办法阻止事件发生的其他元素事件？

感谢。

（另外，这不会发生在IE10。我检查的浏览器是IE8）

Answer 1

您可以通过测试e.target来阻止其他元素（例如：$(e.target).is('#wrapper *')。 但是，这对你没有帮助，因为问题不在于其他元素：当鼠标离开#realWrapper时会触发事件，当你移动到#wrapper时会发生这种情况。

我猜我们没有完整的信息，但为什么不把#wrapper放在#realWrapper中呢？这样您就可以使用e.stopPropagation()或e.preventDefault()。

Answer 2

因为您已将z-index:10和position:absolute应用于#realWrapper div，这就是为什么您的#realWrapper div越过#wrapper div

尝试将position:relative及更高z-index值添加到#wrapper div

$(document).ready(function() {
  $("#realWrapper")
    .mouseover(function(e) {
      $(e.target).css("border-color", "#f00");
    })
    .mouseout(function(e) {
      $(e.target).css("border-color", "#000");
    });
});

#item {
  position: relative;
  width: 100px;
  height: 100px;
}

#realWrapper {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  z-index: 10;
  top: 0;
}

#wrapper {
  width: 100%;
  position: relative;
  z-index: 11;
  border:1px solid lime;
}

a {
  margin-top: 20px;
}

.btn {
  margin: 10px auto 0;
  width: 40px;
  height: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item">
  <div id="realWrapper"></div>
  <div id="wrapper">
    <div>
      <a href="#">Hi abcdefg!</a>
      <div class="btn">
        OK
      </div>
    </div>
  </div>
</div>

Answer 3

在HTML和JS中，当elemnet中发生任何事件时，它会传播到父元素。您可以使用事件对象的e.preventDefault()方法对其进行限制，也可以从子元素的事件函数中return false

＆＃13;

＆＃13;

$(document).ready(function () {
   $("#realWrapper > * ").mouseover(function(e) {
        e.preventDefault();
        return false;
    }).mouseout(function(e) {
        e.preventDefault();
        return false;
    });
    $("#realWrapper").mouseover(function(e) {
        $(this).css("border-color", "#f00");
    }).mouseout(function(e) {
        $(this).css("border-color", "#000");
    });
});

＆＃13;

#item {
  position: relative;
  width: 100px;
  height: 100px;
}

#realWrapper {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  z-index: 10;
}

#wrapper {
  width: 100%;
  height: 100px;
}

a {
  margin-top: 20px;
}

.btn {
  margin: 10px auto 0;
  width: 40px;
  height: 15px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item">
  <div id="realWrapper"></div>
  <div id="wrapper">
    <div>
      <a href="#">Hi abcdefg!</a>
      <div class="btn">
        OK
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

问题的解决方案是相应地调整位置。添加相对位置并将z-index设置为高于realWrapper。我修改了包装器的width和heights以及realWrapper，以便您可以看到差异。

＆＃13;

＆＃13;

$(document).ready(function() {
  $("#realWrapper").mouseover(function(e) {
    $(e.target).css("border-color", "#f00");
  }).mouseout(function(e) {
    $(e.target).css("border-color", "#000");
  });
});

＆＃13;

#item {
  position: relative;
  width: 100px;
  height: 100px;
}

#realWrapper {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  z-index: 10;
}

#wrapper {
  width: 100%;
  height: 100px;
  position: relative;
  z-index: 11;
  border: 1px solid yellow;
}

a {
  margin-top: 20px;
}

.btn {
  margin: 10px auto 0;
  width: 40px;
  height: 15px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item">
  <div id="realWrapper"></div>
  <div id="wrapper">
    <div>
      <a href="#">Hi abcdefg!</a>
      <div class="btn">
        OK
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;