Question

我想在<body>标记中添加一个类，以便在单击按钮时使光标成为十字准线。当我单击页面上的任何位置时，我希望删除此类。

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

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

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

Answer 1

它被直接移除，因为按钮单击处理程序将类添加到html后按钮单击会传播到body元素。然后html元素的处理程序运行，找到body.changeCursor，然后将其删除。

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

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

直播示例：

＆＃13;

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

＆＃13;

.foo {
  display: none;
}
body.changeCursor .foo {
  display: inline-block;
}

＆＃13;

<button type="button">Click me to add</button>
<p>Click here or anywhere but the button above to remove</p>
<p class="foo">I'm only showing when <code>body</code> has <code>changeCursor</code></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

我已经使用stopPropgation 仅停止传播，但如果您不需要执行默认操作，则只需return false ，同时执行stopPropgation 和 preventDefault：

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

直播示例：

＆＃13;

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

＆＃13;

.foo {
  display: none;
}
body.changeCursor .foo {
  display: inline-block;
}

＆＃13;

<button type="button">Click me to add</button>
<p>Click here or anywhere but the button above to remove</p>
<p class="foo">I'm only showing when <code>body</code> has <code>changeCursor</code></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

在动态元素上添加类到body，在页面的任何位置再次单击后删除

1 个答案: