html - CSS3 : Click on round div in the panel

Question

我在 div 里面有一个面板 div 我有一个小的 round div。单击 panel div 时，它会重定向到另一个页面。

点击小的 round div 时，我在它下面看到了另一个 div。但是当我点击小的 round div 时，它也会重定向到另一个页面。我怎样才能避免这种情况？

$( document ).ready(function() {
    $('.small_round_inner_div').click (function (){
      $('.common_cateogory_status_edit_div').slideToggle('slow');
    });
});

.panel_div{
  width:300px;
  height:300px;
  background:#dee5e7;
  position:relative;
  cursor:pointer;
}

.small_round_main_div{
  position:absolute;
  right:15px;
  top:15px;
}

.small_round_main_div .small_round_inner_div{
  width:30px;
  height:30px;
  background:purple;
  border-radius:50%;
}

.common_cateogory_status_edit_div {
  background: #fff;
  position: absolute;
  right: 0px;
  top: 35px;
  border: thin #ced0d1 solid;
  z-index: 1001;
  width: 130px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
  display:none;
}
.common_cateogory_status_edit_div ul {
  padding: 0;
  margin: 0;
}
.common_cateogory_status_edit_div ul li {
  padding: 5px 15px;
  list-style-type: none;
  color: #838383;
}
.common_cateogory_status_edit_div ul li:hover {
  background: #edf1f2;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="https://www.google.com/">

<div class="panel_div">
Some Text
  <div class="small_round_main_div">
    <div class="small_round_inner_div"></div>
    <div class="common_cateogory_status_edit_div fadeIn animated" >
         <ul>
             <li><span>Option 1</span></li>
         </ul>
    </div>
  </div>
</div>
</a>

任何帮助都会很棒。

Answer 1

如果您对 DOM 树上的元素使用事件，您可能希望阻止默认行为并且可能还停止事件的传播。

• > event.preventDefault()
• > event.stopPropagation()

$(document).ready(function() {
  $('.small_round_inner_div').click(function(e) {
    e.stopPropagation();
    e.preventDefault()
    $('.common_cateogory_status_edit_div').slideToggle('slow');
  });
});

.panel_div {
  width: 300px;
  height: 300px;
  background: #dee5e7;
  position: relative;
  cursor: pointer;
}

.small_round_main_div {
  position: absolute;
  right: 15px;
  top: 15px;
}

.small_round_main_div .small_round_inner_div {
  width: 30px;
  height: 30px;
  background: purple;
  border-radius: 50%;
}

.common_cateogory_status_edit_div {
  background: #fff;
  position: absolute;
  right: 0px;
  top: 35px;
  border: thin #ced0d1 solid;
  z-index: 1001;
  width: 130px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
  display: none;
}

.common_cateogory_status_edit_div ul {
  padding: 0;
  margin: 0;
}

.common_cateogory_status_edit_div ul li {
  padding: 5px 15px;
  list-style-type: none;
  color: #838383;
}

.common_cateogory_status_edit_div ul li:hover {
  background: #edf1f2;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="https://www.google.com/">
  <div class="panel_div">
    Some Text
    <div class="small_round_main_div">
      <div class="small_round_inner_div"></div>
      <div class="common_cateogory_status_edit_div fadeIn animated">
        <ul>
          <li>
            <span>Option 1</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</a>