Onclick не стреляет, если элемент повторно вставлен в DOM в середине щелчка

Я создал простой менеджер всплывающих окон, который использовал dom, чтобы решить, какое всплывающее окно должно быть впереди, без какого-либо правила z-index: когда я нажимаю на всплывающее окно, оно перемещается в первую позицию, поэтому оно находится поверх другое всплывающее окно. К сожалению: это движение dom нарушает событие onclick в моем всплывающем окне.

Я сделал простой случай: следующий код должен выводить три события click: mousedown, mouseup и click, он работает в Firefox, и я думаю, что он работал в предыдущих версиях Chrome, но он не " t.

<div>
  <div onmousedown="console.log('mousedown');this.parentElement.appendChild(this);" onmouseup="console.log('mouseup');" onclick="console.log('click');">Click</div>
</div>

Ответ 1

Если повторное вложение элемента в DOM останавливает событие click от запуска, тогда другим вариантом будет перемещение своих братьев и сестер.

Кажется, что это работает (я рекомендую просмотр в полноэкранном режиме, потому что вывод на консоль прерывает события, если он закрывает выделенный вами div):

function moveToFront(el) {
  var parent = el.parentElement;

  while (el.nextSibling) { 
    parent.insertBefore(el.nextSibling, el); 
  }
}

[].slice.call(document.getElementsByClassName('moveable')).forEach(function(el) {
  el.addEventListener('mousedown', function() {
    console.log('mousedown', this.id);
    moveToFront(this);
  });
  el.addEventListener('mouseup', function() {
    console.log('mouseup', this.id);
  });
  el.addEventListener('click', function() {
    console.log('click', this.id);
  });
});

.moveable {
  width: 100px;
  height: 100px;
  position: absolute;
}

#div1 {
  background-color: green;
  top: 10px;
  left: 10px;
}

#div2 {
  background-color: red;
  top: 40px;
  left: 40px;
}

#div3 {
  background-color: yellow;
  top: 20px;
  left: 70px;
}

<div>
  <div id="div1" class="moveable">Click</div>
  <div id="div2" class="moveable">Click</div>
  <div id="div3" class="moveable">Click</div>
</div>

Ответ 2

Не то, что событие прекращает стрельбу, просто вы больше не щелкаете div с событием.

Будьте осторожны с zIndexing, поскольку zIndex относится к этому контейнеру. У вас не может быть контейнер с меньшим количеством zIndex, чем его родительский или вы будете перемещать его за ним. "Грязное" решение состоит в том, чтобы zIndex расти с каждым щелчком мыши:

<style type="text/css">
html, body{
    width: 100%;
    height: 100%;
}

.Movable{
    height: 100px;
    position: absolute;
    width: 100px;
}

.black{
    background-color: black;
}

.gray{
    background-color: gray;
}

.wheat{
    background-color: lightgray;
}

<div style="position: relative; z-index: 20;">
    <p id="log" style="height: 1em; overflow-y: scroll;"></p>
    <div onclick="log( 'clicked', this )" onmousedown="log( 'mousedown', this )" onmouseup="log( 'mouseup', this )" class="Movable black"></div>
    <div onclick="log( 'clicked', this )" onmousedown="log( 'mousedown', this )" onmouseup="log( 'mouseup', this )" style="left: 25px; top: 55px;" class="Movable gray"></div>
    <div onclick="log( 'clicked', this )" onmousedown="log( 'mousedown', this )" onmouseup="log( 'mouseup', this )" style="left: 55px; top: 75px;" class="Movable wheat"></div>
</div>
<script type="text/javascript">
    var index = 1;
    function log( msg, element )
    {
        element.style.zIndex = index++;
        document.getElementById( 'log' ).innerHTML += "Log: " + msg + " -> " + element.className + "</br>";
    }
</script>