0

I've checked out this question/answer, but it did not quite work for my situation.

How to have click event ONLY fire on parent DIV, not children?

I basically have more then just a parent and children structure. We can say there is also the grandchildren elements also. We can go on and assume it can grow much deeper.

<div class="parent">
    <div class="child">
        <div class="grandchild">
        </div>
    </div>
</div>

We have this style applied to all <div>, which basically just says that all elements are the same size, which is also to simplify things:

div {
    width: 100%
    height: 100%;
}

Using jQuery, we have set a "mousedown" on all the classes.

The rule here is that no children knows what is happening with their ancestors (parent, grandparent, great-grandparent...) and cannot ask them for information of any kind (ex.: are you a <div>? What is your class or ID? etc...) nor will they be passed any information from above.

Is there a way using jQuery to allow the "mousedown" on the oldest parent and prevent all "mousedown" from its children, grand children, etc...?

This may be something similar to stopPropagation(), but the other direction.

MightyMouse
  • 153
  • 1
  • 10
  • I'll look into the .off() and .unbind() methods. There must be something the parent can execute to temporally disable "mousedown" events from its children/grandchildren. – MightyMouse Jul 09 '20 at 15:53
  • hmmm..without testing it, it looks like parent.find('*').css("pointer-events", "none"); may work, but will look further for another solution. – MightyMouse Jul 09 '20 at 15:55
  • Looks like .off() will not work as it removes the event completely. – MightyMouse Jul 09 '20 at 16:01
  • 1
    I guess the question here is, how is the `mousedown` being assigned to the elements? Please provide a Minimal, Reproducible Example: https://stackoverflow.com/help/minimal-reproducible-example – Twisty Jul 09 '20 at 16:24

1 Answers1

0

Consider the following.

$(function() {
  $("body").on("mousedown", ".parent", function(e) {
    if (e.target == this) {
      console.log("Parent");
      return true;
    } else {
      console.log("Not Parent");
      return false;
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">PAR
  <div class="child">CHI
    <div class="grandchild">G1</div>
  </div>
</div>

If the Child or Grandchild element is clicked, the mousedown is ignored.

Twisty
  • 30,304
  • 2
  • 26
  • 45