I wasn't sure how to title this issue, but let me explain. I have a box with content, links, and a checkbox inside of it. If you click anywhere in the box, it will mark the checkbox. It will also do this if you click a link. How do I disable the checking of the box if you click a link, instead of the box? (confusing I know, see code snippet below)

$("div").on("click", function() {
  var $checkbox = $(this).find(":checkbox");
  $checkbox.prop("checked", !$checkbox[0].checked);
});

div {
  width: 300px;
  padding: 20px;
  margin: auto;
  background: #999;
  color: #FFF;
}
input {
  display: block;
  height: 50px;
  width: 50px;
  margin: auto;
}

<script src=".1.1/jquery.min.js"></script>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet urna risus. Maecenas egestas pellentesque sapien blandit hendrerit. Morbi tellus felis, elementum ut ligula eu, convallis luctus ante. <a href="" target="_blank">Nulla molestie mollis aliquam.</a> Maecenas
    nisl nulla, fringilla et placerat vitae, tempus ut urna.</p>
  <input type="checkbox" name="check[]" class="check">
</div>

I wasn't sure how to title this issue, but let me explain. I have a box with content, links, and a checkbox inside of it. If you click anywhere in the box, it will mark the checkbox. It will also do this if you click a link. How do I disable the checking of the box if you click a link, instead of the box? (confusing I know, see code snippet below)

$("div").on("click", function() {
  var $checkbox = $(this).find(":checkbox");
  $checkbox.prop("checked", !$checkbox[0].checked);
});

div {
  width: 300px;
  padding: 20px;
  margin: auto;
  background: #999;
  color: #FFF;
}
input {
  display: block;
  height: 50px;
  width: 50px;
  margin: auto;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet urna risus. Maecenas egestas pellentesque sapien blandit hendrerit. Morbi tellus felis, elementum ut ligula eu, convallis luctus ante. <a href="https://www.google." target="_blank">Nulla molestie mollis aliquam.</a> Maecenas
    nisl nulla, fringilla et placerat vitae, tempus ut urna.</p>
  <input type="checkbox" name="check[]" class="check">
</div>

• javascript
• jquery
• html

• Well-asked question!! – T.J. Crowder Commented Jun 9, 2016 at 6:13
• Try to method preventDefault() in javascript. That prevents the default functionality of the object from being executed. – Dale Commented Jun 9, 2016 at 6:13
• 2 I'm confused why you switched the "accepted" answer from Jivan's to Rohit416's? They're effectively the same answer, Jivan just posted it earlier. Obviously you're free to accept whatever answer you want, I'm just asking because the switch makes me wonder if there's a misunderstanding...? – T.J. Crowder Commented Jun 9, 2016 at 7:09
• 1 I totally agree with @T.J.Crowder, if it is doing the same purpose then switching does not make sense. It would be better if you (OP) can hint what was the actual circumstance behind the switch so that it clears the intent !!!! – Rohit416 Commented Jun 10, 2016 at 7:07
• @T.J.Crowder It's hard to explain cause the code is a bit in depth, but basically when the user clicks inside the box, it does either adds X to a variable or subtracts based on if the checkbox is checked. If you click the link inside of the box, the checkbox doesn't check (which your answer fixed), but it subtracted since i clicked the link (inside box). To fix this, I added the $('.my-link').click(function(e) { e.stopPropagation(); }); – Garrettj944 Commented Jun 10, 2016 at 8:27

3 Answers 3

By checking whether the click travelled through a link en route to the div, using event.target:

$("div").on("click", function(event) {
  if ($(event.target).closest("a").length) {
      // It travelled through a link, don't do anything
  } else {
    var $checkbox = $(this).find(":checkbox");
    $checkbox.prop("checked", !$checkbox[0].checked);
  }
});

Updated snippet:

$("div").on("click", function(event) {
  if ($(event.target).closest("a").length) {
    // It travelled through a link, don't do anything
  } else {
    var $checkbox = $(this).find(":checkbox");
    $checkbox.prop("checked", !$checkbox[0].checked);
  }
});

div {
  width: 300px;
  padding: 20px;
  margin: auto;
  background: #999;
  color: #FFF;
}
input {
  display: block;
  height: 50px;
  width: 50px;
  margin: auto;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet urna risus. Maecenas egestas pellentesque sapien blandit hendrerit. Morbi tellus felis, elementum ut ligula eu, convallis luctus ante. <a href="https://www.google." target="_blank">Nulla molestie mollis aliquam.</a> Maecenas
    nisl nulla, fringilla et placerat vitae, tempus ut urna.</p>
  <input type="checkbox" name="check[]" class="check">
</div>

I guess a good'ol stopPropagation in the link's click handler would do the trick.

$("div a").on("click", function(e) {
  e.stopPropagation();
});

This prevents your click from bubbling to the div.

Updated snippet:

$("div").on("click", function(event) {
  var $checkbox = $(this).find(":checkbox");
  $checkbox.prop("checked", !$checkbox[0].checked);
});
$("div a").on("click", function(e) {
  e.stopPropagation();
});

div {
  width: 300px;
  padding: 20px;
  margin: auto;
  background: #999;
  color: #FFF;
}
input {
  display: block;
  height: 50px;
  width: 50px;
  margin: auto;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet urna risus. Maecenas egestas pellentesque sapien blandit hendrerit. Morbi tellus felis, elementum ut ligula eu, convallis luctus ante. <a href="https://www.google." target="_blank">Nulla molestie mollis aliquam.</a> Maecenas
    nisl nulla, fringilla et placerat vitae, tempus ut urna.</p>
  <input type="checkbox" name="check[]" class="check">
</div>

You need event.stopPropagation() on click handler attached to <a>. As per the definition,

It prevents further propagation of the current event in the bubbling phase.

Here is the working snippet.

$("div").on("click", function() {
  var $checkbox = $(this).find(":checkbox");
  $checkbox.prop("checked", !$checkbox[0].checked);
});

$('.my-link').click(function(e) {
    e.stopPropagation();
});

div {
  width: 300px;
  padding: 20px;
  margin: auto;
  background: #999;
  color: #FFF;
}
input {
  display: block;
  height: 50px;
  width: 50px;
  margin: auto;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet urna risus. Maecenas egestas pellentesque sapien blandit hendrerit. Morbi tellus felis, elementum ut ligula eu, convallis luctus ante. <a class="my-link" href="https://www.google." target="_blank">Nulla molestie mollis aliquam.</a> Maecenas
    nisl nulla, fringilla et placerat vitae, tempus ut urna.</p>
  <input type="checkbox" name="check[]" class="check">
</div>