Propagation problem to childs input when moving parent popin

Question

I add some code to a popin to make it movable on the screen but my problem is when i click on an element inside this popin (select, input text, textarea, etc...) it's trigger the code to move my popin and i try some things to stop propagation but not works maybe you have and idea to help me? Or maybe the solution to move my popin is bad?

Sorry for my english... and Thanks by advance here is my code:

var mousePosition;
            var offset = [0,0];
            var divpopin = $("div.sp-body");
            divpopin = divpopin[0];
            var isDown = false;
            divpopin.addEventListener('mousedown', function(e) {
                                isDown = true;
                offset = [
                    divpopin.offsetLeft - e.clientX,
                    divpopin.offsetTop - e.clientY
                ];

            }, true);

            document.addEventListener('mouseup', function() {
                isDown = false;
            }, true);

            document.addEventListener('mousemove', function(event) {
                event.preventDefault();
                if (isDown) {
                    mousePosition = {

                        x : event.clientX,
                        y : event.clientY

                    };
                    divpopin.style.left = (mousePosition.x + offset[0]) + 'px';
                    divpopin.style.top  = (mousePosition.y + offset[1]) + 'px';
                }
            }, true);

.smart-popin
        {
            position: fixed;
            left: 0; right: 0;
            top: 0; bottom: 0;
            overflow: auto;


            background-color: rgba(0,0,0,0.5);
            -webkit-transition: all 0.4s ease;
            -moz-transition: all 0.4s ease;
            -ms-transition: all 0.4s ease;
            -o-transition: all 0.4s ease;
            transition: all 0.4s ease;
            z-index: 5;
        }

        .smart-popin .sp-table
        {
            display: table;
            height: 100%;
            width: 100%;
        }

        .smart-popin .sp-cell
        {
            display: table-cell;
            vertical-align: middle;
            padding: 10px;
        }

        .smart-popin .sp-body
        {
            position: relative;
            z-index: 5;
            width: auto;
            margin: 0 auto;
            background-color: #ffffff;
            padding: 2em;
            -webkit-box-shadow: 0 3px 5px 1px rgba(0,0,0,0.25);
            box-shadow: 0 3px 5px 1px rgba(0,0,0,0.25);
            /*width: 50%;*/
            width: 1024px;
        }

        .smart-popin .sp-body *
        {
            max-width: 100%;
        }

        .smart-popin .sp-back {
            position: fixed;
            left: 0; right: 0;
            top: 0; bottom: 0;

        }

        .smart-popin .sp-close {
            position: absolute;
            top: 0;
            right: 0;
            width: 36px;
            height: 36px;
            text-align: center;
            line-height: 36px;
            font-size: 1.6em;
            color: #000000;
            font-weight: 900;
            text-decoration: none;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smart-popin" id="popin1">
        <div class="sp-table">
            <div class="sp-cell">
                <div class="sp-body">
                    <div class="insidePopinBody">
                    <h2>event</h2>
                    <div id="hiddenMenuModif">
                        <div style="float: left;width:340px;">
                            <label for="activites">Activités</label>
                            <select id="activites">
                                    <option value="1">
                                        blabla
                                    </option>

                            </select>
                        </div>

                        <div style="float: left;width:340px;">
                            <label for="machinePrecis">Ressources</label>
                            <select id="machinePrecis">
                                    <option value="1">
                                        blabla
                                    </option>
                            </select>
                        </div>
                        <div style="float: left;width:340px;">
                            <label for="popinJobAssoc">Job Associé</label>
                            <input type="text" id="popinJobAssoc" value="">
                        </div>
                        <div style="clear:both;width:100%;">
                            <label for="popinSousjob_comment">Commentaire</label>
                            <textarea id="popinSousjob_comment" name="popinSousjob_comment"></textarea>
                        </div>

                        <br>
                        <input type="button" id="modifEvent" value="Modifier" style="width:99%"/><br/>
                    </div>

                    <a href="#" class="sp-close">×</a>
                </div>
                <a href="#" class="sp-back"></a>
                </div>
            </div>
        </div>
    </div>

Answer 1

First: your back-button is "covering" everything and is always the clicked element. Since it is without a function i removed it in my example for answering the question of how to distinguish between the allowed elements and the rest like inputs.

You can restrict the mousedown-handler for the case that the clicked element is a div or a h2 with if ( $(e.target).is('div, h2') ) (its just an example you can also allow labels etc.).

By the way you should change the position for div.sp-body to position: fixed since it is "jumping away" when relative. Furthermore: instead of defining divpopin with jQuery and then selecting the DOM object with [0] you could simply define it directly with plain javascript: var divpopin = document.querySelector("div.sp-body").

Working example:

var mousePosition;
var offset = [0, 0];
var divpopin = document.querySelector("div.sp-body");
var isDown = false;
divpopin.addEventListener('mousedown', function(e) {
  if ($(e.target).is('div, h2')) {
    isDown = true;
    offset = [
      divpopin.offsetLeft - e.clientX,
      divpopin.offsetTop - e.clientY
    ];
  }
}, true);

document.addEventListener('mouseup', function() {
  isDown = false;
}, true);

document.addEventListener('mousemove', function(event) {
  event.preventDefault();
  if (isDown) {
    mousePosition = {

      x: event.clientX,
      y: event.clientY

    };
    divpopin.style.left = (mousePosition.x + offset[0]) + 'px';
    divpopin.style.top = (mousePosition.y + offset[1]) + 'px';
  }
}, true);

.smart-popin {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  z-index: 5;
}

.smart-popin .sp-table {
  display: table;
  height: 100%;
  width: 100%;
}

.smart-popin .sp-cell {
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
}

.smart-popin .sp-body {
  position: fixed;
  z-index: 5;
  width: auto;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 2em;
  -webkit-box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.25);
  box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.25);
  /*width: 50%;*/
  width: 1024px;
}

.smart-popin .sp-body * {
  max-width: 100%;
}

.smart-popin .sp-back {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.smart-popin .sp-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  font-size: 1.6em;
  color: #000000;
  font-weight: 900;
  text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="smart-popin" id="popin1">
  <div class="sp-table">
    <div class="sp-cell">
      <div class="sp-body">
        <div class="insidePopinBody">
          <h2>event</h2>
          <div id="hiddenMenuModif">
            <div style="float: left;width:340px;">
              <label for="activites">Activités</label>
              <select id="activites">
                <option value="1">
                  blabla
                </option>
              </select>
            </div>

            <div style="float: left;width:340px;">
              <label for="machinePrecis">Ressources</label>
              <select id="machinePrecis">
                <option value="1">
                  blabla
                </option>
              </select>
            </div>
            <div style="float: left;width:340px;">
              <label for="popinJobAssoc">Job Associé</label>
              <input type="text" id="popinJobAssoc" value="">
            </div>
            <div style="clear:both;width:100%;">
              <label for="popinSousjob_comment">Commentaire</label>
              <textarea id="popinSousjob_comment" name="popinSousjob_comment"></textarea>
            </div>

            <br>
            <input type="button" id="modifEvent" value="Modifier" style="width:99%" /><br>
          </div>

          <a href="#" class="sp-close">×</a>
        </div>
      </div>
    </div>
  </div>
</div>