javascript - 点击事件触发两次但只设置一次

Question

我有一个奇怪的问题，点击事件被触发了两次，我不知道为什么会这样。

JS Fiddle单击其中一个名称以便触发切换按钮，如果您在标签元素外部单击则不会发生这种情况，那么它实际上只会触发一次。

我将一个事件附加到所有具有“testit”类的元素，当我记录元素时，我得到一个长度为 1 的节点列表，当我记录 foreach 循环运行的次数时，它只运行一次。

如果我删除 Javascript，则不会附加任何事件。

    // SELECTER DEN FEATURED JOKE
    $sql = " SELECT t1.cat_id,
            t1.cat_name,
            t1.cat_parent,
            t1.cat_type
            FROM categories t1
            ORDER BY t1.cat_parent,
            t1.cat_name";
    $stmt = $dbCon->prepare($sql);
    $stmt->execute();
    $count = $stmt->rowCount();
    if ($count > 0) {
        $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

        $orders = [];
        foreach($rows as $row){
            $cat_parent = $row['cat_parent'];
            if($cat_parent == 0){
                $orders[$row['cat_id']]['parent'] = [
                    'cat_id' => $row['cat_id'],
                    'cat_name' => $row['cat_name'],
                    'cat_parent' => $row['cat_parent'],
                    'cat_type' => $row['cat_type']
                ];
                continue;
            }

            if ($cat_parent != 0) {
                $orders[$cat_parent][] = [
                    'cat_id' => $row['cat_id'],
                    'cat_name' => $row['cat_name'],
                    'cat_parent' => $row['cat_parent'],
                    'cat_type' => $row['cat_type']
                ];
                continue;
            }
        }

        $filter_html  = '<form id="filter__form" class="filter__form testit">';
        $filter_html .= '<ul class="filter__ul main">';
        foreach($orders as $order){
            $cat_id     = escape($order['parent']['cat_id']);
            $para       = escape($order['parent']['cat_id']);
            $cat_name   = escape($order['parent']['cat_name']);
            $cat_parent = escape($order['parent']['cat_parent']);
            $cat_type   = escape($order['parent']['cat_type']);

            $filter_html .= '<label class="filter__label parent" for="filter_'.$cat_id.'">';
            $filter_html .= '<p class="noselect">'.$cat_name.'</p>';
            $filter_html .= '<input id="filter_'.$cat_id.'" type="checkbox" value="'.$cat_id.'" name="cat['.$cat_id.']" class="cat_parent" data-show="cat_subs_'.$cat_id.'">';
            $filter_html .= '<i></i>';
            $filter_html .= '</label>';
        }
        $filter_html .= '<input type="hidden" name="CSRFToken" value="'.$_SESSION['CSRFToken'].'">';
        $filter_html .= '</ul>';
        $filter_html .= '</form>';
    }
?>

<div class="filter__head">
    <h3 class="">
        Filter - Dashboard
    </h3>
</div>

<?php
    echo $filter_html;
?>

Javascript

    window.addEventListener("load", function (e) {


        var testit = document.querySelectorAll('.testit');

        console.log(testit);

        testit.forEach(function(e){
            console.log('TESTIT');
            e.addEventListener('click', function(){
                alert('Hello world');
            });
        });
   });

所以事件运行了两次，这在控制台中得到确认，或者在事件被触发时发出警报，节点对象的长度为 1，如果我控制它，这也得到确认，如果我删除 Javascript，则没有事件附上，这是怎么回事？

如果我在 echo $filter_html 的底部用一类 testit 创建一个按钮，然后我点击那个按钮它只会触发一次，有什么区别它怎么能一次触发两次特定元素和一次在另一个相同的事件中？

如果我附加一个 mouseup 事件，则所有事件只触发一次。

如果我注释掉标签元素它不会触发两次？为什么会这样？

CSS

.filter__head h3{
    padding: 15px;
    background-color: #eee;
    text-align: start;
    color: #4a4a4a;
}
.filter__form{
    max-height: 70vh;
    height: 600px;
    overflow: auto;
}
.filter__form .filter__ul .filter__label{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding: 15px 20px;
    cursor: pointer;
}
.filter__form .filter__ul .filter__label:last-child {
  border-bottom: 1px solid #BBB;
}
.filter__form .filter__ul .filter__label > input {
  display: none;
}
.filter__form .filter__ul .filter__label i {
  display: inline-block;
  float: right;
  padding: 2px;
  width: 40px;
  height: 20px;
  border-radius: 13px;
  vertical-align: middle;
  transition: .25s .09s;
  position: relative;
  background: #d8d9db;
  box-sizing: initial;
}
.filter__form .filter__ul .filter__label i:after {
  content: " ";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  left: 2px;
  transition: .25s;
}
.filter__form .filter__ul .filter__label > input:checked + i {
  background: #4bd865;
}
.filter__form .filter__ul .filter__label > input:checked + i:after {
  -webkit-transform: translateX(20px);
          transform: translateX(20px);
}
.filter__form .filter__ul .filter__label:hover {
  cursor: pointer;
}

Answer 1

表单上的第二个单击事件是通过单击包装输入和其他元素的 label 元素触发的。标签元素触发关联输入元素上的点击事件。 MDN says :

"When a label is clicked or tapped and it is associated with a form control, the resulting click event is also raised for the associated control."

阻止单击标签的默认操作不是解决方案，因为它会阻止关联复选框的状态更改。一个修复方法是附加 input 事件而不是 click 以在复选框状态更改时执行您需要的操作。

如果在表单中有更多的输入需要监听，事情就会变得有点复杂，就像使用这种类型的事件委托(delegate)时一样。在这种情况下，您必须检查事件是否真的是由您希望响应点击的元素触发的。