jquery在未单击的未绑定元素上单击触发 HTML 首先我点击.ke

控制台日志

ke

然后单击.x

控制台日志

x

ke

---

为什么？？什么是触发.ke单击事件？在这一点上。键是未绑定的

当您单击某个元素时，事件首先会在该元素上触发，然后是该元素的父元素，然后是该元素的父元素，等等，一直到文档。这就是为什么单击.x会导致.ke的单击处理程序也被触发的原因。要防止这种情况，请返回false、停止传播或确保click元素是事件目标

备选方案一：

function key_tag_click() {
    $('.ke').not('.x').unbind().bind('click', function () {
        console.log('.ke');
        $(this).unbind();
        $(this).children('.x').show();
        x_click();
    });
    return;
}

function x_click() {
    $('.x').unbind().bind('click', function () {
        console.log('.x');
        $(this).unbind();
        $(this).hide();
        key_tag_click();
    });
    return;
}

key_tag_click();

备选方案二：

$('.x').unbind("click").bind('click', function (e) {
    e.stopPropagation();

备选方案三：

$('.ke').unbind().bind('click', function (e) {
    if (this !== e.target) return;
    console.log('.ke');

原因是事件冒泡'。单击元素时，单击事件也会发送到父元素及其父元素，依此类推

由于最后

x\u click（）

调用

key\u tag\u click（）

，因此事件将再次绑定到

.ke

。返回后，事件被发送到

.ke

元素，该处理程序运行

---

为了防止事件冒泡，处理程序必须调用

stopPropagation（）

或

返回false

代码如下-

$('.x').unbind("click").bind('click', function () {
    ... code ...
    return false;
});

---

来源：

我猜

$（'.ke'）。not（'.x'）

不做你认为它做的事情，它选择所有元素，类

ke

，而类

x

，它不阻止传播。我把.not out剪切融合放在首位为什么冒泡？因为嵌套元素重叠。如果您单击一个内部元素，您也在单击它的所有容器。@BenMuircroft在没有事件冒泡的情况下，将一个单击事件添加到一个包含300行的表的每一行的最后一列中的按钮将意味着添加300个单击事件，而不是一个。

$('.x').unbind("click").bind('click', function () {
    ... code ...
    return false;
});

    function key_tag_click() {
        $('.ke').unbind().bind('click', function () {
        console.log('.ke');
        $(this).unbind();
        $(this).children('.x').show();
        x_click();
    });
    return;
    }

    function x_click() {
        $('.x').unbind().bind('click', function () {
        console.log('.x');
        $(this).unbind();
        $(this).hide();
        key_tag_click();
        return false; // return a false to prevent the handler from propagating the
                      //to parent element and thus preventing x from being displayed.
    });
   return ; 
  }

key_tag_click();