How to exclude the container from this javascript code?

Question

This question relates to the last i asked on this site - Using javascript to "link" from html background image?.

I received a good answer which worked, however the link for the background image is also applied to the container. How would I go about ensuring that only clicking on the background image (of the id body) and not the container links to whatever website?

I hope I have been clear enough. Many thanks in advance.

The html:

<html>

<head>
<link href = "style1.css" rel = "stylesheet" type = "text/css">
</head>

<div id = "header">
Header
</div>

<body>

<div id = "body">

<div class = "container">

</div>
</div>

</body>

</html>

<script>
document.getElementById('body').onclick = function() {
window.location = 'http://www.google.com/';
}
</script>

The CSS code:

#header{
width:100%;
height:50px;
background-color:black;
}

#body {
width:100%;
height:2000px;
background-image:url('uploads/1.jpg');
cursor:pointer;
}


.container{
 width: 1000px;
margin-right: auto;
margin-left: auto;
height: 1000px;
background-color:white;
}

JavaScript is not Java. Also, please post the code you have now. — JJJ
– JJJ, Commented Feb 5, 2013 at 15:44
This doesn't warrant the need for a new question. You could of just asked this on the comments of the answer you accepted, as it's heavily related. — Axel
– Axel, Commented Feb 5, 2013 at 15:48
You can't have a <div> outside of your <body> like that! — gen_Eric
– gen_Eric, Commented Feb 5, 2013 at 16:01

gen_Eric · Accepted Answer · 2013-02-05 15:57:36Z

2

In your click handler, you can check the element that was clicked on, if it's not body (meaning it's a child), then don't do anything.

document.getElementById('body').onclick = function(e) {
    // e.target is what you clicked on
    // this is always what the event was bound to
    if(e.target === this){
        window.location = 'http://www.google.com/';
    }
}

answered Feb 5, 2013 at 15:57

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gen_Eric Over a year ago

What browser are you using? It worked for me in IE 9 and Chrome 25.

CoursesWeb · Accepted Answer · 2013-02-05 15:59:59Z

0

Try add this code in your script:

document.querySelector('#body .container').onclick = function() {return false; }

To have:

<script>
document.getElementById('body').onclick = function() {
window.location = 'http://www.google.com/';
}
document.querySelector('#body .container').onclick = function() {return false; }
</script>

edited Feb 5, 2013 at 15:59

answered Feb 5, 2013 at 15:54

CoursesWeb

4,2573 gold badges24 silver badges27 bronze badges

Comments

kube · Accepted Answer · 2013-02-05 16:08:19Z

0

You could also do a return false

document.getElementById('body').onclick = function(e)
{
    if(!(e.target===this))
        return false;
    console.log("click");
    //window.location = 'http://www.google.com/';
}

answered Feb 5, 2013 at 16:08

kube

14.1k9 gold badges36 silver badges39 bronze badges

Collectives™ on Stack Overflow

How to exclude the container from this javascript code?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related