RemoveChild, когда onclick () только для родителя (вне элемента) - PullRequest
Новая
       39

RemoveChild, когда onclick () только для родителя (вне элемента)

0 голосов
/ 07 октября 2018

Как избежать closeWindow() звонить на #window?В настоящее время #window-overlay удаляется со всеми вложенными дочерними элементами при щелчке в любом месте экрана.Но я хочу сделать это только при нажатии на #window-overlay, а не на #window.Так что #window может иметь свои собственные события нажатия.Я абсолютный нуб в JS.Просто пытаюсь делать модальные вещи без использования display:block и т.д ... Идея проста, несмотря ни на что, мое окно всегда будет поверх всего остального, так как оно добавляется к document.body, и мне не нужноочень заботятся о столкновениях z-index и других вещах.Кроме того, cloneNode довольно производительный.Я знаю, что мои функции не могут быть использованы повторно, но об этом я расскажу позже.Возможно, мне нужно разобраться с e.stopPropagation(), но я не уверен, как это реализовать. 

<template id="my-test">
    <div id="window-overlay" class="my-test" onclick="closeWindow()">
        <div id="window" class="window">
            <p>My Window</p>
        </div>
    </div>
</template>

function openProfile() {
    var myTest = document.querySelector('#my-test').content;
    document.body.appendChild(myTest.cloneNode(true));
}

function closeWindow() {
    var wo = document.querySelector('#window-overlay');
    var root = document.body
    root.removeChild(wo);
}

Ответы [ 2 ]

0 голосов
/ 07 октября 2018

Вы можете изменить его ID этого элемента как-то так: 

document.querySelector('#window-overlay').id = "somethingelse";

, и вам не нужно было удалять дочерний элемент, только изменить идентификатор этого элемента удалить эту строку root.removeChild (wo);

0 голосов
/ 07 октября 2018

Действие щелчка распространяется из вашего компонента #window через оверлей # окна.

Затем вам нужно остановить это распространение, и вы можете сделать это следующим образом 

<template id="my-test">
    <div id="window-overlay" class="my-test" onclick="closeWindow()">
        <div id="window" class="window" onclick="e => e.stopPropagation()">
            <p>My Window</p>
        </div>
    </div>
</template>

Если вам нужно выполнить другие действия при щелчке в компоненте #window, вы можете определить его собственную функцию, например, 

<template id="my-test">
    <div id="window-overlay" class="my-test" onclick="closeWindow()">
        <div id="window" class="window" onclick="foo(event)">
            <p>My Window</p>
        </div>
    </div>
</template>


function foo(e) {
     e.stopPropagation();

     // your stuff here ...
}

Надеюсь, это поможет!

...