CODEWITHSUNDEEP
javascriptjqueryhtmlcss
junep
junep

Reputation: 2164

Preventing other elements from event

The below code is a simple version of my code. When I mouse over on #realWrapper then the thick border show up in my code.

The problem is that when I mouse over on a tag and .btn, which are inside the sibling div with #wrapper, mouseout event of #realWrapper occurs!

So, If I add background-color: #000 css to #realWrapper then it is fine, but the contents of #wrapper covered by #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>

Is there any way to prevent event of other elements, I select, from event occurring?

Thanks.

(Plus, This not happen in IE10. The browser I checked is IE8)

Upvotes: 0

Views: 88

Answers (4)

Bhuwan
Bhuwan

Reputation: 16855

Because you have applied z-index:10 and position:absolute to the #realWrapper div, thats why your #realWrapper div coming over the #wrapper div

Try to add position:relative and higher z-index value to #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>

Upvotes: 1

Kiran Dash
Kiran Dash

Reputation: 4956

The solution to your problem will be adjusting the position accordingly. Add position relative and set a z-index higher than the realWrapper. I have modified the width and heights of wrapper and realWrapper so that you can see the difference.

$(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: 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;
}
<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>

Upvotes: 0

Katz
Katz

Reputation: 175

You can prevent other elements by testing e.target (for example : $(e.target).is('#wrapper *'). However, this will not help you, because the problem is not other elements : You event fires when the mouse leaves #realWrapper, and that will happen when you move onto #wrapper.

I'm guessing we don't have the whole information, but why don't you put #wrapper inside #realWrapper ? That way you could use e.stopPropagation() or e.preventDefault().

Upvotes: 1

Haresh Vidja
Haresh Vidja

Reputation: 8496

In HTML and JS when any event occurred in elemnet it propogates to parent element. you can retrict it by using e.preventDefault() method of event object also you can return false from that event function of sub element

$(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");
    });
});
#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>

Upvotes: 0

Related Questions