移动父 poppin 时到子输入的传播问题

Question

我向 popin 添加了一些代码以使其在屏幕上可移动，但我的问题是当我单击此 popin 中的一个元素时（select、输入文本、textarea 等...）它是触发代码来移动我的 popin 我尝试了一些方法来停止传播但不起作用也许你有想法来帮助我？或者移动我的 popin 的解决方案不好？

对不起我的英语...提前致谢这是我的代码：

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

首先：您的后退按钮“覆盖”了所有内容，并且始终是被点击的元素。因为它没有函数，所以我在我的示例中删除了它以回答如何区分允许的元素和其他输入的问题。

如果单击的元素是 div 或带有 if ( $(e.target).is('div, h2') ) 的 h2，您可以限制 mousedown-handler（这只是一个示例，您还可以允许标签等）。

顺便说一句，你应该将 div.sp-body 的位置更改为 position: fixed，因为它在相对时会“跳开”。此外：不是用 jQuery 定义 divpopin 然后用 [0] 选择 DOM 对象，你可以直接用普通 javascript: var divpopin = document.querySelector("div.sp-body").

工作示例：

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>

移动父 poppin 时到子输入的传播问题

Propagation problem to childs input when moving parent popin

html

javascript

jquery

stoppropagation