jquery - jquery点击触发未点击的未绑定元素

Question

HTML

<b class="ke">some text <b class="x">x</b></b>

Javascript

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();

1. 首先我点击 .ke

控制台日志

克

1. 然后我点击.x

控制台日志

X

克

为什么？？什么是触发 .ke 点击事件？此时 .key 未绑定！

Answer 1

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

选项一：

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

选项二：

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

选项三：

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

Answer 2

原因是事件冒泡`。当你点击一个元素时，点击事件也会被发送到父元素、它的父元素等等。

由于最后x_click()调用key_tag_click()，事件再次绑定在.ke. 返回后，事件被发送到.ke元素，并且这个处理程序运行。

为了防止事件冒泡，处理程序必须调用stopPropagation()or return false。

Answer 3

代码将是这样的 -

    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();

来源：http ://api.jquery.com/event.stopPropagation/