移动父popin时，子项输入的传播问题

Question

我向一个popin添加了一些代码，使其在屏幕上可以移动，但我的问题是，当我点击这个popin中的一个元素(选择、输入文本、文本区域等(时，它会触发代码移动我的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

首先：您的后退按钮是"覆盖"；一切，并且始终是单击的元素。由于它没有函数，我在示例中删除了它，以回答如何区分允许的元素和其他类似输入的问题。

对于单击的元素是带有if ( $(e.target).is('div, h2') )的div或h2的情况，您可以限制mousedown处理程序(这只是一个示例，您还可以允许使用标签等(

顺便说一下，您应该将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>