So I want to trigger an action after a click anywhere on the body, the code is:
HTML:
<body>
<div class="paper"></div>
</body>
CSS:
body{
background-color: #F5F5F5;
margin:0px;
padding:0px;}
.paper{
width: 500px;
height: 200px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
background-color: white;}
and js:
window.onload = function(){
$('body').on('click',function(){
console.log("click");
})
}
My problem is that the click is only registered when I click in our next to the div; if I click below nothing happens.
I am a bit confused by this, isn't the body the entire page? If I change the background-color of the body the entire background in the browser gets that colour, but using it with jQuery is different?
(jQuery is properly loaded and there are no error logs)
So I want to trigger an action after a click anywhere on the body, the code is:
HTML:
<body>
<div class="paper"></div>
</body>
CSS:
body{
background-color: #F5F5F5;
margin:0px;
padding:0px;}
.paper{
width: 500px;
height: 200px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
background-color: white;}
and js:
window.onload = function(){
$('body').on('click',function(){
console.log("click");
})
}
My problem is that the click is only registered when I click in our next to the div; if I click below nothing happens.
I am a bit confused by this, isn't the body the entire page? If I change the background-color of the body the entire background in the browser gets that colour, but using it with jQuery is different?
(jQuery is properly loaded and there are no error logs)
Share edited Jan 17, 2016 at 13:46 Ultimate_Noob asked Jan 17, 2016 at 13:45 Ultimate_NoobUltimate_Noob 411 gold badge1 silver badge4 bronze badges 5-
2
The body doesn't always cover the entire viewport, you seem to have it mixed up with the
document– adeneo Commented Jan 17, 2016 at 13:46 - But anyway it seems to be inconsistent with the fact that the background changes the color in the whole viewport. – lex82 Commented Jan 17, 2016 at 13:50
-
1
add css
html, body {min-height:100%}and try the click again. Will see what adeneo is talking about – charlietfl Commented Jan 17, 2016 at 13:50 -
1
And if you want the "entire screen" to be clickable, always use
$(document)– adeneo Commented Jan 17, 2016 at 13:52 - @Ultimate_noob The body is not the whole page, well visually it appears so, but there are things like event propagation, bubbling, event capture going beyond on what is rendered visible on screen. Check my reply below, that will work. – damiano celent Commented Jan 17, 2016 at 14:21
5 Answers
Reset to default 1Try this:
$('html').on('click', function(){
console.log('click');
})
The proper way to achieve the desired effect, is to put your click handler on your document, like this :
$(document).on('click',function(){
console.log("click");
});
Now, also want to make sure your JavaScript code is at the very bottom of your HTML file, like this :
<html>
<head>
// header content goes here
</head>
<body>
// body content goes here
<script src="https://code.jquery./jquery-2.2.0.min.js"></script>
<script>
$(document).on('click',function(){
console.log("click");
});
</script>
</body>
</html>
If you can not or do not want to put your JS code at the very bottom of your HTML, you could also wrap your click handle with $(document).ready(), like this :
$(document).ready(function(){
$(document).on('click',function(){
console.log("click");
});
});
See this Fiddle for a demo.
Target document
$(window).load(function() {
$(document).on('click',function(){
console.log("click");
alert("clicked");
});
});
You have to have the on load wrapper, or you get an initial undefined for $. Can obviously be doc ready, but you have load in the original post.
try this.this will help to you
<html>
<head>
<title></title>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<!-- js-->
<script type="text/javascript">
$(document).ready(function(){
$('body').click(function(){
alert(" ");
});
});
</script>
</body>
</html>
*I suggest you to check your jquery is working.simply put an alert(" ") and check it before you go for huge one.hope this helps to you.cheers!!!
Selecting on 'body' may not be what you expect (you may want document instead), but here is the correct syntax:
$('body').on('click', 'selector', function(){
/* do something here */
})
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744909037a4600434.html
评论列表（0条）