Сделайте весь DIV кликабельным, кроме выпадающего

Question

Я пытаюсь сделать весь DIV кликабельным и заставить его работать.Однако я хочу сделать исключение из выпадающего меню.При нажатии на это раскрывающееся меню button не должно открываться next.html.В настоящее время он открывает раскрывающийся список, но также быстро открывает next.html.Как мне это сделать?

Демо: https://jsfiddle.net/40wntLyo/

<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

Первым делом вы должны удалить встроенное событие 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 2

Следующий фрагмент должен работать

Переместить событие 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>

Answer 3

Добавьте функцию JS в родительский div выпадающего списка, который вызывается по клику:

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

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