Javascript 将类添加到动态元素的主体中，再次单击页面上的任意位置后删除

我想在

标记中添加一个类，使光标在单击按钮时成为十字线。当我单击页面上的任何位置时，我希望该类被删除

当前我单击按钮，添加类，然后立即删除

$('button').on('click', function() {
  $('body').addClass('changeCursor');
}

$('html').on('click', '.changeCursor', function(){
  $('body.changeCursor').removeClass('changeCursor');
});

---

它会立即被删除，因为在您的按钮单击处理程序将类添加到

body

之后，按钮单击会传播到

html

元素。然后

html

元素的处理程序运行，找到

body.changeCursor

，并将其删除

只需在第一个处理程序中停止传播：

$('button').on('click', function(e) {
  $('body').addClass('changeCursor');
  e.stopPropagation();
});

现场示例：

$（'button'）。在（'click'，函数（e）{
$（'body'）.addClass（'changeCursor'）；
e、 停止传播（）；
});
$（'html'）。在（'click'，'changeCursor'，function（）上{
$（'body.changeCursor'）.removeClass（'changeCursor'）；
});
.foo{
显示：无；
}
body.changeCursor.foo{
显示：内联块；
}
单击我添加
单击此处或除上面按钮以外的任何位置以删除

我仅在
body
具有
changeCursor

它会立即删除，因为在您的按钮单击处理程序将类添加到
主体之后，按钮单击会传播到
html
元素。然后
html
元素的处理程序运行，找到
body.changeCursor
，并将其删除

只需在第一个处理程序中停止传播：

$('button').on('click', function(e) {
  $('body').addClass('changeCursor');
  e.stopPropagation();
});

现场示例：


$（'button'）。在（'click'，函数（e）{
$（'body'）.addClass（'changeCursor'）；
e、 停止传播（）；
});
$（'html'）。在（'click'，'changeCursor'，function（）上{
$（'body.changeCursor'）.removeClass（'changeCursor'）；
});
.foo{
显示：无；
}
body.changeCursor.foo{
显示：内联块；
}
单击我添加
单击此处或除上面按钮以外的任何位置以删除

我仅在
body
具有
changeCursor