admin管理员组文章数量:1399251
I want to add a class to the <body> tag to make the cursor a crosshair when clicking a button. When I click any where on the page, I then want this class to be removed.
Currently I click the button, the class is added, and then removed straight away.
$('button').on('click', function() {
$('body').addClass('changeCursor');
}
$('html').on('click', '.changeCursor', function(){
$('body.changeCursor').removeClass('changeCursor');
});
I want to add a class to the <body> tag to make the cursor a crosshair when clicking a button. When I click any where on the page, I then want this class to be removed.
Currently I click the button, the class is added, and then removed straight away.
$('button').on('click', function() {
$('body').addClass('changeCursor');
}
$('html').on('click', '.changeCursor', function(){
$('body.changeCursor').removeClass('changeCursor');
});
1 Answer
Reset to default 4It's removed straight-away because the button click propagates to the html element after your button click handler adds the class to body. Then the html element's handler runs, finds body.changeCursor, and removes it.
Just stop propagation in the first handler:
$('button').on('click', function(e) {
$('body').addClass('changeCursor');
e.stopPropagation();
});
Live Example:
$('button').on('click', function(e) {
$('body').addClass('changeCursor');
e.stopPropagation();
});
$('html').on('click', '.changeCursor', function() {
$('body.changeCursor').removeClass('changeCursor');
});.foo {
display: none;
}
body.changeCursor .foo {
display: inline-block;
}<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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>There I've used stopPropgation which only stops propagation, but if you don't need the default action to occur, you can just return false, which does both stopPropgation and preventDefault:
$('button').on('click', function() {
$('body').addClass('changeCursor');
return false;
});
Live Example:
$('button').on('click', function() {
$('body').addClass('changeCursor');
return false;
});
$('html').on('click', '.changeCursor', function() {
$('body.changeCursor').removeClass('changeCursor');
});.foo {
display: none;
}
body.changeCursor .foo {
display: inline-block;
}<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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>本文标签：
版权声明：本文标题：javascript - Add class to body on dynamic element, remove after clicking again anywhere on page - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744150833a2593049.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论