Question

我正在尝试使整个DIV可点击并使其正常运行。但是，我想对下拉菜单做一个例外。单击此下拉列表button不能打开next.html。当前，它会打开下拉菜单，但也会很快打开next.html。我该怎么办？

<div class="project__body" onclick="location.href='next.html';">
  <div class="row">
    <div class="col-10">
      <h1>Title of the DIV</h1>
    </div>
    <div class="col-2 text-right">
      <div class="dropdown">
        <button type="button" class="dropdown-btn dropdown-toggle" data-toggle="dropdown">Menu</button>
          <div class="dropdown-menu dropdown-menu-right">
            <a class="dropdown-item" href="#">Edit</a>
            <a class="dropdown-item" href="#">Delete</a>
          </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <p>There's more content here in this div. There's more content here in this div. There's more content here in this div. </p>
    </div>
</div>

Answer 1

在下拉菜单的父div中添加一个JS函数，该函数会在点击时调用：

<div class="col-2 text-right" onclick="processClick()">
  // Dropdown content here
</div>

<script>
    function processClick(e) { e.stopPropagation() }
</script>

Answer 2

首先，您必须删除内联javascript事件并尝试以下示例：

jQuery：

$('.dropdown').click(function(event){
    event.stopPropagation();
    $('.dropdown-menu').toggle();
})
$('.project__body').click(function(){
   window.location.href="next.html"
})

html：

<div class="project__body">
  <div class="row">
    <div class="col-10">
      <h1>Title of the DIV!</h1>
    </div>
    <div class="col-2 text-right">
      <div class="dropdown">
        <button type="button" class="dropdown-btn dropdown-toggle" data-toggle="dropdown">Menu</button>
          <div class="dropdown-menu dropdown-menu-right">
            <a class="dropdown-item" href="#">Edit</a>
            <a class="dropdown-item" href="#">Delete</a>
          </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <p>There's more content here in this div. There's more content here in this div. There's more content here in this div. </p>
    </div>
</div>

Answer 3

以下代码段应该有效

将click事件移动到父级下拉容器中，这也将阻止在单击下拉项时重定向

$('.dropdown').click(function(event) {
  $(this).children(".dropdown-menu").toggle()
  event.stopPropagation();
})

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="project__body" onclick="location.href='next.html';">
  <div class="row">
    <div class="col-10">
      <h1>Title of the DIV!</h1>
    </div>
    <div class="col-2 text-right">
      <div class="dropdown">
        <button type="button" class="dropdown-btn dropdown-toggle" data-toggle="dropdown">Menu</button>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="#">Edit</a>
          <a class="dropdown-item" href="#">Delete</a>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <p>There's more content here in this div. There's more content here in this div. There's more content here in this div. </p>
    </div>
  </div>

使整个DIV可点击，但下拉菜单除外

3 个答案: