Форум

Volonter · #1 (**permalink**) 22.05.2022, 11:06

Всем привет, столкнулся с такой проблемой. Если кнопка прописана в html разметке, то событие клика срабатывает корректно

<body>
<button class="vsfm_control-btn" data-command="close">
      <i class="icon-clear"></i>
      <span class="vsfm_control-btn-text">Закрыть</span>
</button>
</body>

let toolBtn = document.querySelectorAll('button')
        toolBtn.forEach(function(b) {
            if (b.disabled) return
            b.addEventListener('click', command, false) // в command получаем dataset.command кнопки, все ок
        })

но если я эту кнопку генерю в скрипте, и добавляю в DOM вот таким образом

let btn = `
<button class="vsfm_control-btn" data-command="close">
      <i class="icon-clear"></i>
      <span class="vsfm_control-btn-text">Закрыть</span>
</button>
`
document.body.insertAdjacentHTML('beforeend', btn)

// и слушаю событие клика по ней
let toolBtn = document.querySelectorAll('button')
        toolBtn.forEach(function(b) {
            if (b.disabled) return
            b.addEventListener('click', command, false) // в command получаем dataset.command кнопки, все ок
        })

то, если курсор находится на иконке или тексте (которые в тегах i и span соответственно), событие клика не срабатывает, так как курсор не на кнопке, а на дочернем ее элементе. Если кликнуть куда то в уголок кнопки, то все срабатывает. Повторюсь, это случается только если кнопка сгенерирована динамически, по прописанной в html документе кнопке клик отрабатывает нормально. Не знаю, может сумбурно описал, но думаю должно быть понятно))
Заранее спасибо!

рони · #2 (**permalink**) 22.05.2022, 12:39

Volonter,
вы что-то не договариваите ...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
 
</head>

<body>
<script>
let btn = `
<button class="vsfm_control-btn" data-command="close">
      <i class="icon-clear"></i>
      <span class="vsfm_control-btn-text">Закрыть</span>
</button>
`
document.body.insertAdjacentHTML('beforeend', btn)
function command()
{
    alert(this.dataset.command);
}
// и слушаю событие клика по ней
let toolBtn = document.querySelectorAll('button')
        toolBtn.forEach(function(b) {
            if (b.disabled) return
            b.addEventListener('click', command, false) // в command получаем dataset.command кнопки, все ок
        })

</script>

</body>
</html>

Volonter · #3 (**permalink**) 22.05.2022, 12:50

Да, действительно, получается не договариваю)) Дело в том, что у меня все это происходит и во всплывающем окне, которое то же создается динамически, вот сразу не подумал, что может от этого зависит. Просто весь код окно+кнопки будет очень много буков приводить, но спасибо за наводку, в упрощенном варианте действительно работает корректно, просто не додумался попробовать. Теперь знаю где копать)) Спасибо!

рони · #4 (**permalink**) 22.05.2022, 13:34

Volonter,
css смотрите, возможно другой элемент с pointer-events: none; перекрывает кнопку

Volonter · #5 (**permalink**) 25.05.2022, 10:10

Всем привет, проблему устранить так и не удалось, привожу полный код. Кнопку динамически создавать не стал, оказывается она и в четко прописанном html не корректно "кликается". Если курсор на иконке или тексте, получаем undefined, если где-то в уголке кнопки - все норм.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST</title>
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
</head>
<style>
    html,
    body {
        margin: 0;
        padding: 0;
    }
    
    *,
    *:before,
    *:after {
        -webkit-border-sizing: border-box;
        -moz-border-sizing: border-box;
        box-sizing: border-box;
    }
    
    body.vsfm_disable-scroll {
        position: relative;
        overflow: hidden;
        font-family: "Helvetica Neue", "Segoe UI", helvetica, verdana, sans-serif !important;
    }
    
    .vsfm_overlay {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: rgba(0, 0, 0, .5);
    }
    
    .vsfm_modal {
        display: flex;
        flex-direction: column;
        width: clamp(300px, 90%, 1780px);
        height: clamp(300px, 70%, 800px);
        margin: 0 auto;
        background: #fff;
        box-shadow: 0 16px 16px -10px rgba(34, 47, 62, .25), 0 0 40px 1px rgba(34, 47, 62, .25);
        position: relative;
    }
    /* TOOLBAR */
    
    .vsfm_modaltoolbar {
        background: #FAFAFA;
        padding: 6px 20px;
        min-height: 48px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .vsfm_modaltoolbar-one {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .vsfm_control-btn {
        display: flex;
        align-items: center;
        border-radius: 4px;
        border-width: 1px;
        border-style: solid;
        border-color: transparent;
        background: #e0e0e0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 7px 18px 8px 18px;
        font-family: "Helvetica Neue", "Segoe UI", helvetica, verdana, sans-serif !important;
        color: #333;
        font-size: .9rem;
        cursor: pointer;
        text-align: center;
        box-sizing: border-box;
    }
    
    .vsfm_control-btn:hover {
        background: #e4e3e3;
    }
    
    .vsfm_control-btn i {
        font-style: normal;
        font-size: 22px;
        padding-right: 8px;
    }
</style>

<body class="vsfm_disable-scroll">
    <div class="vsfm_overlay">
        <div class="vsfm_modal">
            <div class="vsfm_modaltoolbar">
                <div class="vsfm_modaltoolbar-one">
                    <button class="vsfm_control-btn" data-command="create">
                        <i class="icon-create_new_folder">✚</i>
                        <span class="vsfm_control-btn-text">Создать</span>
                    </button>
                </div>
                <div class="vsfm_modaltoolbar-second">
                    <button class="vsfm_control-btn" data-command="close">
                        <i class="icon-clear">✖</i>
                        <span class="vsfm_control-btn-text">Закрыть</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script>
        let button = document.querySelectorAll('[data-command]')
        button.forEach(function(b) {
            b.onclick = function(event) {
                if (b.disabled) return
                let command = event.target.dataset.command
                alert(command)
            }
        })
    </script>
</body>

</html>

рони · #6 (**permalink**) 25.05.2022, 10:48

Volonter,
у вас перебор с event.target, не ищите dataset, там где его нет)))
используйте код предложенный выше, или исправьте event в строке 126.

Volonter · #7 (**permalink**) 25.05.2022, 11:27

рони,
Спасибо, опять я мудрю и вы правы, ищу проблему там, где ее нет)) Все супер!

рони · #8 (**permalink**) 25.05.2022, 12:49

Volonter,
контрольный ~~выстрел~~ вопрос: что вместо target нужно указать?)))

Volonter · #9 (**permalink**) 25.05.2022, 13:19

рони,
я указал this.dataset.command, но сработает и b.dataset.command ,
и вам встречный вопрос - что правильно?

рони · #10 (**permalink**) 25.05.2022, 13:33

Сообщение от Volonter

что правильно?

в данном случае this и b - это одно и тоже.
читайте про event, ищите где, в event, будет нужный вам элемент.

Форум

Справочник

Discord чат

Курсы javascript