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

首先点击.ke

控制台记录

科

然后点击.x

控制台记录

X

科

为什么？什么是触发.ke点击事件？在这一点上.key没有绑定！

Answer 1

当你点击一个元素时，首先在该元素上触发事件，然后是元素parent，然后是元素parent等，一直到文档。这就是为什么点击.x会导致.ke的点击处理程序也被触发的原因。要防止它，请返回false，停止传播，或确保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').unbind("click").bind('click', function () {
    ... code ...
    return false;
});

Answer 2

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

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

为防止事件冒泡，处理程序必须调用stopPropagation()或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/

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

HTML

的Javascript

3 个答案: